:root{--accent:#087e8b;--ink:#243640;--muted:#6b7d87}body{background:#f4f7f8;color:var(--ink);font-family:Arial,sans-serif}.manager-shell{display:flex;min-height:100vh}.manager-sidebar{width:235px;background:white;border-right:1px solid #e6ecee;padding:32px 24px;display:flex;flex-direction:column;flex-shrink:0}.manager-brand{font-size:24px;font-weight:700;color:var(--ink);text-decoration:none}.manager-brand span{color:var(--accent)}.manager-sidebar small{font-size:10px;letter-spacing:1.5px;color:var(--muted);margin:48px 0 18px}.manager-nav{padding:14px;background:#e8f5f5;border-radius:8px;color:var(--accent);font-weight:600}.manager-nav i{margin-right:12px}.manager-account{margin-top:auto;padding-top:40px;font-size:14px}.manager-main{flex:1;min-width:0}.manager-topbar{height:76px;background:white;border-bottom:1px solid #e6ecee;padding:26px 40px;font-size:14px}.manager-topbar span{float:right;color:var(--muted)}.manager-content{padding:40px;max-width:1500px;margin:auto}.manager-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}.manager-heading small{font-size:11px;letter-spacing:2px;color:var(--accent)}h1{font-size:32px;font-weight:700;margin:10px 0}p{color:var(--muted)}.manager-stat,.manager-site,.manager-form{background:white;border:1px solid #e2eaed;border-radius:12px;padding:26px}.manager-stat{margin-bottom:12px}.manager-stat span{display:block;color:var(--muted);font-size:13px}.manager-stat strong{display:block;font-size:32px;margin-top:12px}.manager-search{display:flex;gap:10px}.manager-search input{max-width:460px}.manager-site{height:100%;display:flex;flex-direction:column}.manager-site-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.manager-icon{background:#e8f5f5;color:var(--accent);border-radius:10px;padding:12px;font-size:24px}.manager-site h2{font-size:20px;font-weight:600}.manager-url{font-size:13px;overflow-wrap:anywhere}.manager-notes{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:120px;overflow:auto}.manager-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:20px;border-top:1px solid #eef1f3}.btn-primary{background:var(--accent);border-color:var(--accent)}.btn-outline-primary{color:var(--accent);border-color:var(--accent)}.manager-empty{text-align:center;padding:70px 20px;background:white;border:1px dashed #cad8de;border-radius:12px}.manager-empty>i{font-size:48px;color:var(--accent);margin-bottom:24px}.manager-empty h2{font-size:24px}.manager-form{max-width:680px}.manager-login{display:grid;place-items:center;min-height:100vh;padding:24px}.manager-login .manager-form{width:100%;max-width:420px}.form-control{min-height:44px}.btn{padding:10px 16px;border-radius:7px}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #19aebc;outline-offset:3px}@media(max-width:767px){.manager-shell{display:block}.manager-sidebar{width:100%;padding:18px;display:block}.manager-sidebar small,.manager-nav{display:none}.manager-account{padding-top:10px;display:flex;justify-content:space-between;align-items:center}.manager-account form .btn{margin-top:0!important}.manager-topbar{display:none}.manager-content{padding:24px 16px}.manager-heading{align-items:flex-start;flex-direction:column}h1{font-size:28px}.manager-stat{padding:18px}.manager-search{flex-wrap:wrap}}


/* Acceso Anthares: estilos exclusivos de la pantalla de ingreso. */
.anthares-login {
    min-height: 100vh;
    min-height: 100svh;
    padding: 48px 20px;
    background-color: #071c2b;
    background-image: linear-gradient(120deg, rgba(4, 18, 31, .28), rgba(5, 34, 46, .38)), url('../assets/img/anthares-login-bg.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.manager-login .anthares-login-card {
    max-width: 450px;
    padding: 38px 36px 28px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(0, 12, 25, .35);
}
.anthares-login-logo {
    display: block;
    width: 136px;
    height: 136px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 14px;
}
.anthares-sidebar-logo {
    display: block;
    width: 112px;
    height: 112px;
    object-fit: contain;
    margin: 0 auto 10px;
}
.manager-brand .anthares-sidebar-name {
    display: block;
    text-align: center;
    font-size: 17px;
    color: var(--ink);
}
.anthares-login .anthares-login-brand {
    color: #173443;
    font-size: clamp(21px, 5.5vw, 26px);
    font-weight: 700;
    letter-spacing: -.65px;
}
.anthares-login h1 { font-size: 29px; letter-spacing: -.6px; }
.anthares-login .form-label { color: #354e5c; font-size: 14px; font-weight: 600; }
.anthares-login .form-control { min-height: 48px; border-color: #d7e2e8; border-radius: 9px; background-color: #f8fafb; }
.anthares-login .form-control:focus { background: #fff; border-color: #087e8b; box-shadow: 0 0 0 3px rgba(8, 126, 139, .13); outline: 0; }
.anthares-login .btn-primary { min-height: 48px; font-weight: 600; border-radius: 9px; box-shadow: 0 6px 16px rgba(8, 126, 139, .16); }
.anthares-login .btn-primary:hover { background: #066875; border-color: #066875; }
.anthares-login .btn-primary span { margin-left: 10px; }
.anthares-login-footer { margin-top: 26px; color: #7c8e98; font-size: 12px; }
@media (max-width: 480px) {
    .anthares-login { padding: 28px 16px; }
    .manager-login .anthares-login-card { padding: 30px 24px 24px; border-radius: 18px; }
}


.anthares-login .anthares-login-logo {
    width: 190px;
    height: 190px;
    margin-bottom: 0;
}

.manager-pages { margin: 10px 0 24px; max-height: 42vh; overflow-y: auto; }
.manager-page-link { display: block; padding: 11px 12px; margin: 3px 0; border-radius: 7px; color: #526978; font-size: 14px; overflow-wrap: anywhere; text-decoration: none; }
.manager-page-link i { margin-right: 7px; }
.manager-page-link:hover, .manager-page-link.is-active { background: #e8f5f5; color: #087e8b; }
.manager-page-link.is-active { font-weight: 700; border-left: 3px solid #087e8b; }
.manager-settings-link { font-size: 13px; color: #526978; padding: 12px 4px; }
.manager-stat .monitoring-stat-value { font-size: 24px; overflow-wrap: anywhere; }
.monitoring-progress { width: 100%; height: 8px; margin-top: 14px; accent-color: #087e8b; }
@media (max-width: 767px) { .manager-pages { max-height: 160px; margin-bottom: 12px; } }

.manager-websites-table { background: #fff; border: 1px solid #e2eaed; border-radius: 12px; overflow: hidden; }
.manager-websites-table table { min-width: 850px; }
.manager-websites-table thead th { background: #eef5f6; color: #526978; font-size: 12px; font-weight: 600; white-space: nowrap; padding: 16px; }
.manager-websites-table tbody th, .manager-websites-table tbody td { padding: 18px 16px; }
.manager-websites-table tbody tr:last-child > * { border-bottom: 0; }
.manager-table-name { display: inline-block; min-width: 110px; max-width: 200px; overflow-wrap: anywhere; color: #243640; text-decoration: none; font-weight: 600; }
.manager-table-url { min-width: 180px; max-width: 270px; overflow-wrap: anywhere; font-size: 13px; }
.manager-table-notes { min-width: 160px; max-width: 260px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; color: #6b7d87; }
.manager-table-actions { min-width: 200px; }
.manager-table-actions .btn { white-space: nowrap; }

.manager-menu { list-style: none; margin: 0; padding: 0; }
.manager-sidebar .manager-nav { display: block; background: transparent; color: #526978; text-decoration: none; }
.manager-sidebar .manager-nav:hover, .manager-sidebar .manager-nav.is-active { background: #e8f5f5; color: #087e8b; }
.manager-submenu { padding: 2px 0 8px 22px; }
.manager-submenu-link { display: block; padding: 10px 12px; margin: 2px 0; border-radius: 7px; color: #526978; font-size: 13px; text-decoration: none; }
.manager-submenu-link i { width: 18px; margin-right: 5px; }
.manager-submenu-link:hover, .manager-submenu-link.is-active { color: #087e8b; background: #e8f5f5; }
.manager-submenu-link.is-active { font-weight: 700; }
.manager-sidebar-footer { margin-top: auto; padding-top: 20px; }
.manager-sidebar .manager-account { margin-top: 0; padding-top: 18px; }

.manager-stat-button { display: block; width: 100%; text-align: left; color: inherit; font: inherit; }
.manager-stat-button:not(:disabled) { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.manager-stat-button:not(:disabled):hover { border-color: #087e8b; box-shadow: 0 4px 16px rgba(8,126,139,.1); }
.manager-stat-button:disabled { opacity: 1; cursor: default; }
.manager-users-modal { width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 1px solid #e2eaed; border-radius: 16px; color: #243640; background: #fff; box-shadow: 0 24px 80px rgba(0,12,25,.3); }
.manager-users-modal:not([open]) { display: none; }
.manager-users-modal[open] { display: flex; flex-direction: column; }
.manager-users-modal::backdrop { background: rgba(7,28,43,.65); }
.manager-users-modal-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px; border-bottom: 1px solid #e2eaed; }
.manager-users-modal-header h2 { overflow-wrap: anywhere; }
.manager-users-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #526978; font-size: 30px; line-height: 1; cursor: pointer; }
.manager-users-close:hover { background: #eef5f6; color: #087e8b; }
.manager-users-modal-body { overflow-y: auto; min-height: 0; padding: 20px 24px; }
.manager-users-modal-body table { min-width: 650px; }
.manager-users-modal-body td { overflow-wrap: anywhere; max-width: 260px; }

.manager-users-modal-header { flex-shrink: 0; }
@media (max-width: 575px) { .manager-users-modal-header, .manager-users-modal-body { padding: 16px; } }

 
.resource-chart-card { --chart-color: #087e8b; text-align: center; padding: 24px; }
.resource-chart-card.resource-tone-warning { --chart-color: #b37708; }
.resource-chart-card.resource-tone-danger { --chart-color: #c34153; }
.resource-chart-label { min-height: 36px; font-size: 14px; font-weight: 600; color: #526978; margin: 0; }
.resource-gauge { width: 144px; height: 144px; margin: 12px auto 18px; position: relative; }
.resource-gauge svg { display: block; width: 100%; height: 100%; }
.resource-gauge circle { fill: none; stroke-width: 8; }
.resource-gauge-track { stroke: #e9f0f2; }
.resource-gauge-value { stroke: var(--chart-color); stroke-linecap: round; }
.resource-gauge-caption { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.resource-gauge-caption b { color: #243640; font-size: 25px; }
.resource-gauge-caption small { color: #6b7d87; font-size: 11px; }
.resource-chart-card .resource-current { margin-top: 0; font-size: 24px; }
.resource-chart-status { color: var(--chart-color); background: color-mix(in srgb, var(--chart-color) 9%, white); border-radius: 20px; padding: 5px 12px; margin: 16px auto 0; display: inline-block; font-size: 11px; font-weight: 600; }
.resource-no-limit { min-height: 144px; display: flex; flex-direction: column; gap: 14px; justify-content: center; align-items: center; margin: 12px 0 18px; }
.resource-no-limit i { font-size: 36px; color: #087e8b; background: #e8f5f5; padding: 18px; border-radius: 18px; }
.resource-no-limit span { font-size: 12px; }
.traffic-chart { padding: 20px; border: 1px solid #e2eaed; border-radius: 12px; background: #f8fbfc; }
.traffic-chart figcaption strong { font-size: 14px; }
.traffic-chart svg { display: block; width: 100%; height: auto; }
.traffic-chart-grid { stroke: #e2ecef; stroke-width: 1; }
.traffic-chart-bar { fill: #1497a5; }
.traffic-chart-bar:hover { fill: #075f6c; }

.hosting-comparison { padding: 28px; border: 1px solid #e2eaed; border-radius: 16px; background: #fff; box-shadow: 0 4px 22px rgba(25,66,81,.025); }
.hosting-comparison-rows { display: grid; gap: 18px; }
.hosting-comparison-item { font-size: 13px; color: #526978; }
.hosting-comparison-item strong { color: #243640; font-size: 13px; }
.hosting-bar-track { height: 9px; background: #edf4f5; border-radius: 6px; overflow: hidden; }
.hosting-bar-fill { height: 100%; background: linear-gradient(90deg,#087e8b,#38c9c0); border-radius: 6px; }
.hosting-bar-fill.hosting-bar-warning { background: linear-gradient(90deg,#b37708,#e6ba4e); }
.hosting-bar-fill.hosting-bar-danger { background: linear-gradient(90deg,#c34153,#ed8b96); }
.hosting-spotlight { position: relative; overflow: hidden; padding: 32px; border-radius: 16px; background: linear-gradient(135deg,#087d8c,#10b7b1); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.hosting-spotlight::after { content: ''; pointer-events: none; position: absolute; width: 230px; height: 230px; border: 35px solid rgba(255,255,255,.07); border-radius: 50%; top: -110px; right: -100px; }
.hosting-spotlight-caption { font-size: 10px; font-weight: 600; letter-spacing: 1.8px; opacity: .9; }
.hosting-spotlight h2 { margin: 18px 0 4px; font-size: 22px; color: #fff; overflow-wrap: anywhere; }
.hosting-spotlight-percent { font-size: 64px; font-weight: 700; line-height: 1.25; letter-spacing: -3px; }
.hosting-spotlight-percent small { font-size: 28px; letter-spacing: 0; margin-left: 4px; }
.hosting-spotlight-value { color: #fff; font-size: 16px; margin: 12px 0 24px; }
.hosting-spotlight-value span { opacity: .8; }
.hosting-spotlight-note { font-size: 12px; line-height: 1.6; color: #fff; border-top: 1px solid rgba(255,255,255,.25); padding-top: 18px; }
@media (max-width: 575px) { .hosting-comparison, .hosting-spotlight { padding: 22px; } .hosting-spotlight-percent { font-size: 54px; } }