/* Modern login styles for Pesquera Jano */
:root{
	--green:#06b6d4; /* teal accent for dark */
	--muted:#b6cfd3;
	--bg-1:#061221; /* deep navy */
	--bg-2:#0b2633;
	--card:#071422; /* card dark */
	--surface:#0f2a33;
	--input-bg:rgba(255,255,255,0.03);
	--input-border:rgba(255,255,255,0.06);
}

/* Light theme variables removed (theme toggle disabled) */
*{box-sizing:border-box;font-family:Inter,Arial,Helvetica,sans-serif}
.body-bg-decor{display:none}
/* Aquatic themed background with subtle SVG waves */
body{margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 100%)}
body::before{
	content:"";
	position:fixed;left:0;top:0;right:0;bottom:0;z-index:-1;
	background:
		radial-gradient(circle at 12% 10%, rgba(6,182,212,0.06) 0%, rgba(6,182,212,0) 20%),
		radial-gradient(circle at 88% 85%, rgba(6,182,212,0.04) 0%, rgba(6,182,212,0) 18%),
		linear-gradient(180deg, rgba(6,18,34,0.6) 0%, rgba(11,38,51,0.6) 100%);
}

/* decorative SVG waves overlay */
body::after{
	content:"";
	position:fixed;left:0;right:0;bottom:-20px;height:45vh;z-index:-1;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'><defs><linearGradient id='w' x1='0' x2='1'><stop offset='0' stop-color='%2306b6d4' stop-opacity='0.10'/><stop offset='1' stop-color='%2303a4b0' stop-opacity='0.06'/></linearGradient></defs><path d='M0 100 C150 40 350 160 600 100 C850 40 1050 160 1200 100 L1200 200 L0 200 Z' fill='url(%23w)'/></svg>");
	background-repeat:no-repeat;background-position:center bottom;background-size:cover;opacity:0.75;pointer-events:none;filter:blur(6px);
}
.app-container{width:100%;max-width:420px;padding:20px}
.card{position:relative;background:linear-gradient(180deg,var(--card), rgba(8,20,26,0.7));padding:28px 30px;border-radius:16px;box-shadow:0 28px 80px rgba(2,8,14,0.65);overflow:visible;border:1px solid rgba(255,255,255,0.04);backdrop-filter: blur(10px);color:#e6f7f5;transition:transform .18s ease,box-shadow .18s ease}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-top-left-radius:16px;border-top-right-radius:16px;background:linear-gradient(90deg,var(--green), rgba(4,151,166,0.9));box-shadow:0 6px 18px rgba(4,151,166,0.12)}
.card:hover{transform:translateY(-6px);box-shadow:0 36px 110px rgba(2,8,14,0.7)}
.card-header{display:flex;gap:14px;align-items:center;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.03)}
.logo-wrap{width:84px;height:84px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(180deg,rgba(6,182,212,0.06),rgba(6,182,212,0.02));box-shadow:0 8px 26px rgba(6,182,212,0.06);flex-shrink:0}
.logo-img{width:62px;height:62px;border-radius:10px;background:#fff;display:block}
.brand-text{flex:1;text-align:left}
.title{font-size:20px;margin:0;color:#ffffff;font-weight:800}
.subtitle{color:var(--muted);font-size:13px;margin:6px 0 0}
.login-form{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.input{width:100%;height:48px;padding:10px 16px;border-radius:24px;border:1px solid rgba(255,255,255,0.04);font-size:15px;background:rgba(4,12,18,0.55) !important;color:#e9fbfb !important;transition:box-shadow .12s ease,border-color .12s ease}
/* Ensure input text stays readable (override browser autofill / focus styles) */
.input:focus{background:rgba(4,12,18,0.65) !important; color:#ffffff !important}
/* WebKit autofill override */
.input:-webkit-autofill,
.input:-webkit-autofill:focus,
.input:-webkit-autofill:hover {
	-webkit-text-fill-color: #ffffff !important;
	color: #ffffff !important;
	box-shadow: 0 0 0px 1000px rgba(4,12,18,0.65) inset !important;
	background-clip: padding-box !important;
}
/* Firefox autofill override */
input:-moz-autofill,
input:-moz-autofill:focus,
input:-moz-autofill:hover {
	-moz-text-fill-color: #ffffff !important;
	color: #ffffff !important;
	box-shadow: 0 0 0px 1000px rgba(4,12,18,0.65) inset !important;
}
.input:-internal-autofill-selected { background-color: rgba(4,12,18,0.65) !important; color: #ffffff !important; }
.input::placeholder{ color: rgba(255,255,255,0.75) !important; }
.input-user{background-image:
	radial-gradient(circle at 18px center, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 20px, transparent 20px),
	url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'><path fill='%23ffffff' d='M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v1h20v-1c0-3.3-6.7-5-10-5z'/></svg>")
	;
	background-repeat: no-repeat, no-repeat;
	background-position: 18px center, 18px center;
	background-size: 36px 36px, 18px 18px;
	padding-left: 64px;
}
.input-pw{background-image:
	radial-gradient(circle at 18px center, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 20px, transparent 20px),
	url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'><path fill='%23ffffff' d='M12 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/><path fill='%23ffffff' d='M17 8V7a5 5 0 0 0-10 0v1H5v11h14V8h-2zM9 7a3 3 0 0 1 6 0v1H9V7z'/></svg>")
	;
	background-repeat: no-repeat, no-repeat;
	background-position: 18px center, 18px center;
	background-size: 36px 36px, 18px 18px;
	padding-left: 64px;
}
.input::placeholder{color:rgba(255,255,255,0.75)}
.input:focus{outline:none;box-shadow:0 10px 40px rgba(6,182,212,0.08);border-color:rgba(6,182,212,0.22);background:rgba(255,255,255,0.04)}
.input:focus-visible{outline:3px solid rgba(6,182,212,0.12);outline-offset:2px}
.pw-toggle:focus-visible{outline:3px solid rgba(6,182,212,0.12);outline-offset:2px}

.btn:focus-visible{outline:3px solid rgba(6,182,212,0.12);outline-offset:2px}

/* Improve legibility: slightly larger type and spacing */
.title{font-size:22px}
body{font-size:16px}
.label{font-size:14px}
.input{font-size:16px}

/* Checkbox size adjusted to be less prominent */
.remember input[type="checkbox"]{width:14px;height:14px;margin-right:8px}

/* Light theme overrides removed (theme toggle disabled) */
.pw-wrap{position:relative}
.pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--green);font-weight:700;padding:6px 10px;border-radius:8px;cursor:pointer}
.pw-toggle:focus{outline:2px solid rgba(6,182,212,0.16)}
.user-wrap{position:relative}
.user-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.06);display:block;box-shadow:0 6px 18px rgba(0,0,0,0.12);pointer-events:none}
.user-icon{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v1h20v-1c0-3.3-6.7-5-10-5z'/></svg>");background-repeat:no-repeat;background-position:center center;background-size:18px 18px}
.btn{background:linear-gradient(180deg,#06b6d4,#0497a6);color:#021820;padding:12px;border-radius:12px;border:0;font-weight:800;font-size:16px;width:100%;margin-top:6px;cursor:pointer;transition:transform .12s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 26px 60px rgba(4,151,166,0.22)}
.form-row{display:flex;flex-direction:column}
	.form-actions{display:flex;align-items:center;justify-content:flex-start;margin-top:6px;width:100%;padding-left:6px}
	.remember{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#cdeff0;margin:0}
.forgot{font-size:13px;color:var(--green);text-decoration:none}
.forgot:hover{text-decoration:underline;opacity:0.9}
.helper{font-size:12px;color:#6b7280;margin-top:8px;text-align:center}
.card-footer{margin-top:14px;text-align:center}
.footer{font-size:12px;color:#bcdfe2;margin:0}
.error{color:#ffb4b4;padding:10px;border-radius:8px;background:rgba(255,65,65,0.06);margin-bottom:6px;text-align:center}

/* small adjustments for very small screens */
@media (max-width:360px){
	.app-container{padding:12px}
	.logo-wrap{width:60px;height:60px}
	.logo-img{width:48px;height:48px}
}

@media (max-width:420px){
	.card{padding:18px}
	.logo-img{width:70px;height:70px}
	.title{font-size:16px}
}

/* Modal: zone selector */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1200}
.modal[aria-hidden="false"]{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,10,0.6);backdrop-filter:blur(4px)}
.modal-panel{position:relative;background:linear-gradient(180deg,var(--card), rgba(8,20,26,0.9));border-radius:12px;padding:18px;width:520px;max-width:92%;box-shadow:0 30px 80px rgba(2,8,14,0.7);border:1px solid rgba(255,255,255,0.04)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.modal-header h3{margin:0;color:#eafcff}
.modal-close{background:transparent;border:0;color:var(--muted);font-size:22px;cursor:pointer}
.modal-body{padding:6px 0}
.modal-desc{color:var(--muted);font-size:13px;margin-bottom:8px}
.zone-search{margin-bottom:8px}
.zone-list-wrap{max-height:260px;overflow:auto;border-radius:8px;border:1px solid rgba(255,255,255,0.03);padding:6px}
.zone-table{width:100%;border-collapse:collapse}
.zone-table thead th{font-size:13px;text-align:left;padding:8px;color:var(--muted)}
.zone-table tbody td{padding:8px;border-top:1px solid rgba(255,255,255,0.02);color:#e8fbfb}
.zone-table tbody tr:hover{background:rgba(255,255,255,0.06); color: #ffffff}
.modal-footer{display:flex;justify-content:flex-end;margin-top:10px}
.zone-select-btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--green);padding:6px 10px;border-radius:8px;cursor:pointer}
.zone-select-btn[aria-disabled="true"]{opacity:0.5;cursor:not-allowed}

/* Ensure login inputs (usuario / password) have identical pill appearance */
.login-form .input{background:rgba(4,12,18,0.6) !important;color:#ffffff !important;height:48px;padding:10px 16px;border-radius:24px;border:1px solid rgba(255,255,255,0.04);padding-right:64px}
.login-form .input::placeholder{color:rgba(255,255,255,0.68) !important}
.login-form .input-user, .login-form .input-pw{padding-left:64px;padding-right:64px;background-position:18px center, 18px center;background-size:36px 36px,18px 18px}
.login-form .pw-toggle{color:#06b6d4;font-weight:700}

/* Make icon circle a bit darker to contrast on all inputs */
.login-form .input-user{background-image: radial-gradient(circle at 18px center, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 20px, transparent 20px);background-position:18px center;background-size:36px 36px}
.login-form .input-pw{background-image: radial-gradient(circle at 18px center, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 20px, transparent 20px), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'><path fill='%23ffffff' d='M12 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/><path fill='%23ffffff' d='M17 8V7a5 5 0 0 0-10 0v1H5v11h14V8h-2zM9 7a3 3 0 0 1 6 0v1H9V7z'/></svg>")}

/* If browser applies different background (autofill), force dark pill for login inputs */
.login-form .input:-webkit-autofill, .login-form .input:-webkit-autofill:focus{
	-webkit-text-fill-color: #ffffff !important;
	box-shadow: 0 0 0px 1000px rgba(4,12,18,0.65) inset !important;
}

/* Enterprise modal specific layout */
.enterprise-wrap{display:flex;gap:12px}
.enterprise-list{flex:1}
.enterprise-table{width:100%;border-collapse:collapse}
.enterprise-table thead th{font-size:12px;color:var(--muted);padding:8px;text-align:left}
.enterprise-table tbody td{padding:8px;border-top:1px solid rgba(255,255,255,0.02);color:#e8fbfb}
.enterprise-table tbody tr{cursor:pointer}
.enterprise-table tbody tr:hover{background:rgba(6,182,212,0.02)}
.enterprise-years{width:110px;border-left:1px solid rgba(255,255,255,0.03);padding-left:10px}
.enterprise-years h4{margin:0 0 6px 0;color:#eafcff}
.enterprise-years ul{list-style:none;padding:0;margin:0}
.enterprise-years li{padding:6px 8px;border-radius:6px;cursor:pointer;color:var(--muted)}
.enterprise-years li.active{background:var(--green);color:#021820;font-weight:700}

/* Zone + Season modal layout */
.zone-season-wrap{display:flex;gap:12px}
.zone-column{flex:1}
.season-column{width:220px}
.zs-list{list-style:none;padding:6px;margin:0;max-height:260px;overflow:auto}
.zs-list li{padding:10px 12px;border-radius:10px;color:#e8fbfb;cursor:pointer;transition:background .12s ease,color .12s ease,box-shadow .12s ease,transform .08s ease;border-left:4px solid transparent}
.zs-list li:hover{background:rgba(6,182,212,0.06); color:#eafcff; font-weight:700; box-shadow:none; transform:translateX(2px); border-left-color:rgba(6,182,212,0.14)}
.zs-list li.selected{background:rgba(6,182,212,0.16);color:#eafcff;font-weight:800;border-left-color:var(--green);box-shadow:inset 0 0 0 1px rgba(6,182,212,0.06)}

/* Improve modal text contrast and legibility */
.modal-panel{ color: #e8fbfb; }
.modal-panel h4, .season-column h4 { color: #eafcff; margin-top:0; }
.modal-desc{ color: #cfeff0; }
.zs-list li{ color: #e8fbfb; }
.zs-list li:hover{ /* keep hover consistent across lists */ }
.zone-table tbody td, .zone-table tbody td * { color: #e8fbfb; }
.modal-close{ color: #cfeff0; }

.zone-select-btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--green);padding:6px 10px;border-radius:8px;cursor:pointer;transition:all .12s ease}
.zone-select-btn:hover{background:var(--green);color:#021820;border-color:transparent}
.zone-select-btn[aria-disabled="true"]{opacity:0.5;cursor:not-allowed}

/* Compact action buttons inside tables (Ver / Editar) */
.week-table .actions .btn.small-btn,
.zone-table .actions .btn.small-btn {
	padding:6px 10px;
	font-size:14px;
	min-width:84px;
	width:auto;
	border-radius:8px;
}

/* Ensure small export style falls back if not in page-specific CSS */
.btn.small-export{padding:8px 12px;font-size:14px;border-radius:8px}