
    :root{
      --nav:#10395d;--nav2:#0e2d4a;--bg:#bcbcbc;--main:#e4e4e4;--card:#fff;
      --text:#172b3f;--muted:#65717c;--line:#c9c9c9;
      --m:#f2b900;--t:#f16f1f;--n:#2f6fbe;--d:#4aa640;--v:#d95b6e;
      --d12:#d97b1f;--n12:#355f9b;--apoyo:#6f9fd3;
    }
    *{box-sizing:border-box} body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
    button,input,select{font:inherit}
    .app{width:calc(100% - 20px);min-height:calc(100vh - 20px);margin:10px auto;display:grid;grid-template-columns:205px minmax(0,1fr);background:var(--main);border-radius:20px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.18)}
    aside{background:linear-gradient(180deg,var(--nav),var(--nav2));color:#fff;padding:26px 14px;display:flex;flex-direction:column}
    .brand{padding:0 10px 20px;border-bottom:1px solid rgba(255,255,255,.13)} .brand b{display:block;font-size:18px}.brand span{font-size:12px;color:#bdd0e2}
    nav{display:grid;gap:6px;margin-top:22px}.nav{border:0;background:transparent;color:#dfeaf4;text-align:left;padding:12px;border-radius:10px;cursor:pointer;font-weight:700}.nav:hover{background:rgba(255,255,255,.08)}.nav.active{background:#fff;color:var(--nav)}
    .foot{margin-top:auto;padding:12px 10px 0;font-size:11px;color:#9fb9cf}
    main{padding:78px 20px 24px;overflow:auto}
    .view{display:none}.view.show{display:block}
    .top{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:16px}.eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:900;color:#275f9e}.title{font-size:30px;margin:5px 0 3px}.sub{color:var(--muted);margin:0}
    .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 8px 18px rgba(0,0,0,.08)}
    .quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.quick button{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px;text-align:left;cursor:pointer}.quick strong{display:block;margin-bottom:5px}.quick span{font-size:12px;color:var(--muted)}
    .ops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.op{border:1px solid var(--line);background:#fff;border-radius:11px;padding:14px}.op strong{display:block}.code{font-size:19px;font-weight:900;margin-top:8px}
    .toolbar{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin-bottom:12px}.field{display:flex;flex-direction:column;gap:5px}.field label{font-size:11px;text-transform:uppercase;font-weight:900;color:var(--muted)}.input{height:40px;border:1px solid #b8c0c8;border-radius:8px;background:#fff;padding:0 10px;font-weight:700}.btn{height:40px;border:0;border-radius:8px;padding:0 14px;background:var(--nav);color:#fff;font-weight:900;cursor:pointer}
    .status{font-size:12px;color:var(--muted);min-height:18px;margin:8px 0}.error{color:#b3261e;font-weight:800}
    .calwrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}.cal{border-collapse:collapse;width:100%;table-layout:fixed;font-size:10.5px}.cal th,.cal td{border:1px solid #d6d6d6;text-align:center;height:42px;padding:1px;overflow:hidden}.cal th{background:#ececec}.cal .name{width:112px;text-align:left;padding-left:8px;font-weight:900;background:#f7f7f7}.cal .special{background:#f7dddd;color:#c62828}
    .manana{background:var(--m)}.tarde{background:var(--t)}.noche{background:var(--n);color:#fff}.descanso{background:var(--d)}.vacaciones{background:var(--v);color:#fff}.dia12{background:var(--d12)}.noche12{background:var(--n12);color:#fff}.apoyo{background:var(--apoyo)}.alerta{background:#ffd6d6}.vacio{background:#fff}
    .tablewrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.table{border-collapse:collapse;width:100%;min-width:780px;background:#fff;font-size:12px}.table th{background:var(--nav);color:#fff;padding:10px}.table td{padding:9px;border-bottom:1px solid #e2e2e2;text-align:center}.table td:first-child{text-align:left;font-weight:800}
    .config{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.box{background:#fff;border:1px solid var(--line);border-radius:11px;padding:13px}.box b{display:block;margin-bottom:5px}.pill{display:inline-block;padding:5px 8px;border-radius:999px;background:#efefef;font-size:11px;margin:3px}
    @media(max-width:900px){.app{grid-template-columns:76px 1fr}.brand b,.brand span,.nav span,.foot{display:none}.quick{grid-template-columns:repeat(2,1fr)}.ops,.config{grid-template-columns:1fr}}
    @media(max-width:650px){.app{grid-template-columns:1fr;margin:0;width:100%;border-radius:0}aside{position:sticky;top:0;z-index:10;flex-direction:row;overflow:auto;padding:8px}.brand,.foot{display:none}nav{display:flex;margin:0}.nav{min-width:44px}main{padding:22px 12px}.quick{grid-template-columns:1fr}}

    /* ===== Inicio equivalente a la planilla ===== */
    #inicio .inicio-hero {
      display:grid;
      grid-template-columns:1fr auto;
      align-items:start;
      gap:18px;
      margin-bottom:16px;
    }
    #inicio .inicio-title {
      text-align:left;
    }
    #inicio .inicio-title h1 {
      margin:4px 0 2px;
      font-size:31px;
      line-height:1.05;
      color:#15324d;
    }
    #inicio .inicio-title .system-name {
      margin-top:3px;
      font-size:16px;
      font-weight:800;
      color:#334e68;
    }
    #inicio .today-line {
      margin-top:7px;
      font-size:13px;
      color:#65717c;
    }
    #inicio .version-badge {
      font-size:12px;
      font-weight:850;
      color:#17365d;
      padding-top:4px;
      white-space:nowrap;
    }

    #inicio .quick {
      margin-bottom:12px;
    }
    #inicio .quick button {
      position:relative;
      min-height:88px;
      border-radius:0;
      box-shadow:none;
      padding:15px 16px;
    }
    #inicio .quick button:nth-child(1){background:#e7f0fb;border-bottom:5px solid #2f6fbe;}
    #inicio .quick button:nth-child(2){background:#e3f3e9;border-bottom:5px solid #2f8a55;}
    #inicio .quick button:nth-child(3){background:#ece4f7;border-bottom:5px solid #7046b3;}
    #inicio .quick button:nth-child(4){background:#faeadb;border-bottom:5px solid #e57a18;}
    #inicio .quick strong{font-size:15px;color:#18324e;}
    #inicio .quick span{font-size:12px;}

    #inicio .operators-panel {
      background:#fff;
      border:1px solid #cfcfcf;
      border-radius:0;
      padding:0;
      box-shadow:none;
    }
    #inicio .operators-head {
      padding:12px 14px 8px;
      border-bottom:1px solid #e2e2e2;
    }
    #inicio .operators-head h3 {
      margin:0;
      font-size:16px;
      letter-spacing:.03em;
    }
    #inicio .operators-head p {
      margin:4px 0 0;
      color:#6d7884;
      font-size:12px;
      font-style:italic;
    }
    #inicio .ops {
      gap:0;
    }
    #inicio .op {
      position:relative;
      border:0;
      border-bottom:1px solid #d7d7d7;
      border-radius:0;
      padding:12px 14px 12px 72px;
      min-height:82px;
      background:#fff !important;
      color:#17324d !important;
    }
    #inicio .op:nth-child(odd) {
      border-right:1px solid #d7d7d7;
    }
    #inicio .op::before {
      content:"";
      position:absolute;
      left:0; top:0; bottom:0;
      width:58px;
      background:#c7c7c7;
    }
    #inicio .op.manana::before {background:var(--m);}
    #inicio .op.tarde::before {background:var(--t);}
    #inicio .op.noche::before {background:#7047bd;}
    #inicio .op.descanso::before {background:#39a24a;}
    #inicio .op.vacaciones::before {background:var(--v);}
    #inicio .op.dia12::before {background:var(--d12);}
    #inicio .op.noche12::before {background:var(--n12);}
    #inicio .op.apoyo::before {background:var(--apoyo);}
    #inicio .op strong {
      font-size:14px;
      text-transform:uppercase;
    }
    #inicio .op .code {
      font-size:17px;
      margin-top:8px;
    }
    #inicio .op .turn-detail {
      font-size:12px;
      margin-top:2px;
      color:#31475c;
      white-space:pre-line;
    }

    #inicio .add-operator {
      display:flex;
      align-items:center;
      gap:12px;
      width:50%;
      min-height:76px;
      margin-top:0;
      padding:12px 14px;
      border:1px dashed #9cb7d1;
      background:#f7f9fb;
      color:#2767b3;
      cursor:pointer;
      text-align:left;
    }
    #inicio .add-operator .plus {
      width:58px;
      align-self:stretch;
      display:grid;
      place-items:center;
      background:#dbe3ea;
      color:#333;
      font-size:26px;
      margin:-12px 0 -12px -14px;
    }
    #inicio .add-operator strong{display:block;font-size:15px;}
    #inicio .add-operator span{display:block;font-size:12px;margin-top:4px;}

    #inicio .inicio-bottom {
      display:grid;
      grid-template-columns:minmax(330px,.8fr) minmax(500px,1.2fr);
      margin-top:18px;
      border:1px solid #d2d2d2;
      background:#fff;
    }
    #inicio .coverage-box {
      min-height:126px;
      display:grid;
      place-items:center;
      text-align:center;
      background:#eff9f2;
      border-right:1px solid #d2d2d2;
      color:#14843a;
      padding:18px;
    }
    #inicio .coverage-box.aviso {
      background:#fff8e8;
      color:#9a6713;
    }
    #inicio .coverage-box .cov-title {
      font-size:16px;
      font-weight:900;
    }
    #inicio .coverage-box .cov-detail {
      margin-top:4px;
      font-size:13px;
      font-weight:750;
    }

    #inicio .holiday-box {
      min-height:126px;
      display:grid;
      grid-template-columns:88px 1fr 92px;
      align-items:center;
      background:#fff6f6;
      color:#9b2323;
    }
    #inicio .chile-flag {
      width:72px;
      height:46px;
      margin:auto;
      position:relative;
      background:linear-gradient(to bottom,#fff 0 50%,#d52b1e 50% 100%);
      box-shadow:0 1px 4px rgba(0,0,0,.16);
    }
    #inicio .chile-flag::before {
      content:"★";
      position:absolute;
      left:0; top:0;
      width:28px; height:23px;
      display:grid; place-items:center;
      background:#0039a6;
      color:#fff;
      font-size:12px;
    }
    #inicio .holiday-info {
      text-align:center;
      padding:10px;
      font-size:13px;
      font-weight:750;
    }
    #inicio .holiday-info .holiday-title {
      font-size:14px;
      font-weight:900;
      margin-bottom:10px;
    }
    #inicio .holiday-count {
      text-align:center;
      font-size:14px;
      font-weight:900;
      padding:10px;
    }
    #inicio .holiday-count b {
      display:block;
      font-size:22px;
      margin:3px 0;
    }

    #inicio .stats-mini {
      display:none;
    }

    @media(max-width:900px){
      #inicio .add-operator{width:100%}
      #inicio .inicio-bottom{grid-template-columns:1fr}
      #inicio .coverage-box{border-right:0;border-bottom:1px solid #d2d2d2}
    }


    /* ===== INICIO PREMIUM SGT - 10/08/2026 ===== */
    #inicio .inicio-hero{
      position:relative; display:block; height:240px; min-height:240px; margin:0 0 16px; overflow:hidden;
      border-radius:16px; border:1px solid #24384a;
      background-image:linear-gradient(90deg,rgba(3,18,31,.94) 0%,rgba(4,25,42,.78) 34%,rgba(4,25,42,.18) 67%,rgba(4,25,42,.08) 100%),url("assets/embedded/embedded-01.jpg");
      background-size:cover; background-position:center 46%; background-repeat:no-repeat; box-shadow:0 10px 24px rgba(0,0,0,.18);
    }
    #inicio .inicio-title{position:absolute;left:32px;top:34px;color:#fff;z-index:2;max-width:620px}
    #inicio .inicio-title .eyebrow{display:none}
    #inicio .inicio-title h1{margin:0 0 6px;font-size:38px;line-height:1.05;color:#fff;letter-spacing:.015em;text-shadow:0 2px 8px rgba(0,0,0,.45)}
    #inicio .inicio-title .system-name{font-size:24px;font-weight:850;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.45)}
    #inicio .today-line{display:inline-flex;align-items:center;margin-top:24px;padding:9px 15px;border-radius:999px;background:rgba(16,57,93,.84);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:13px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.18)}
    #inicio .today-line::before{content:'▣';margin-right:8px}
    #inicio .version-badge{position:absolute;right:18px;top:18px;z-index:3;padding:8px 12px;border-radius:999px;background:rgba(7,19,30,.72);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:11px;font-weight:900}

    #inicio .quick{gap:12px;margin-bottom:14px}
    #inicio .quick button{min-height:96px;border-radius:12px;padding:17px 18px 15px;box-shadow:0 5px 12px rgba(0,0,0,.08);transition:transform .15s ease,box-shadow .15s ease}
    #inicio .quick button:hover{transform:translateY(-2px);box-shadow:0 9px 18px rgba(0,0,0,.12)}
    #inicio .quick strong{font-size:15px;margin-bottom:8px}
    #inicio .quick span{font-size:12px;color:#425466}
    #inicio .quick button::after{content:'›';position:absolute;right:16px;top:30px;font-size:28px;font-weight:400;color:#102d48}

    #inicio .operators-panel{border-radius:14px;border:1px solid #cbd3da;overflow:hidden;box-shadow:0 7px 16px rgba(0,0,0,.07)}
    #inicio .operators-head{padding:14px 18px 10px;background:#fff}
    #inicio .operators-head h3{font-size:16px}
    #inicio .ops{padding:10px 16px 0;gap:10px;background:#fff}
    #inicio .op{min-height:104px;border:1px solid #d7dde3!important;border-radius:9px!important;padding:14px 16px 12px 94px;box-shadow:0 2px 5px rgba(0,0,0,.035)}
    #inicio .op::before{width:78px}
    #inicio .op::after{position:absolute;left:0;top:0;width:78px;height:100%;display:grid;place-items:center;font-size:30px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.2)}
    #inicio .op.manana::after{content:''} #inicio .op.tarde::after{content:''} #inicio .op.noche::after{content:''} #inicio .op.descanso::after{content:''}
    #inicio .op.vacaciones::after{content:'🏖'} #inicio .op.dia12::after{content:'12h'} #inicio .op.noche12::after{content:'12h'} #inicio .op.apoyo::after{content:'👷'}
    #inicio .op strong{font-size:14px}
    #inicio .op .code{font-size:21px;margin-top:7px}
    #inicio .op .turn-detail{font-size:12px;margin-top:4px;color:#415568}
    #inicio .op.noche .code{color:#5a35a2} #inicio .op.manana .code{color:#d99a00} #inicio .op.tarde .code{color:#e45c13} #inicio .op.descanso .code{color:#21833a}

    #inicio .add-operator{width:50%;min-height:66px;margin:10px 16px 14px;border-radius:8px;background:#f7fbff}
    #inicio .add-operator .plus{width:58px;border-radius:7px 0 0 7px;background:#e8f2fc;color:#1f64aa}

    #inicio .inicio-bottom{gap:12px;margin-top:14px;border:0;background:transparent}
    #inicio .coverage-box,#inicio .holiday-box{min-height:130px;border:1px solid #d3d9df;border-radius:13px;box-shadow:0 6px 14px rgba(0,0,0,.06);overflow:hidden}
    #inicio .coverage-box{place-items:center start;text-align:left;padding:20px 28px;background:linear-gradient(90deg,#effaf2,#f8fffa)}
    #inicio .coverage-box .cov-title{font-size:17px}
    #inicio .coverage-box .cov-title::before{content:'🛡️';font-size:30px;margin-right:14px;vertical-align:middle}
    #inicio .coverage-box .cov-detail{margin-left:48px}
    #inicio .holiday-box{background:linear-gradient(90deg,#fff8f8,#fff1f1)}
    #inicio .holiday-title{font-size:14px}
    #inicio .holiday-count{font-size:12px;font-weight:900;text-align:center}
    #inicio .holiday-count b{font-size:30px}

    @media(max-width:900px){
      #inicio .inicio-hero{height:205px;min-height:205px}
      #inicio .inicio-title{left:24px;top:28px}
      #inicio .inicio-title h1{font-size:30px}
      #inicio .inicio-title .system-name{font-size:18px}
      #inicio .add-operator{width:calc(100% - 32px)}
    }


    /* Hero panorámico estable */
    html, body { max-width:100%; overflow-x:hidden; }
    .app { max-width:100vw; }
    main { min-width:0; }
    #inicio { min-width:0; }
    #inicio .inicio-hero { width:100%; max-width:100%; box-sizing:border-box; }
    @media (min-width:1400px) {
      #inicio .inicio-hero { height:240px; min-height:240px; }
    }


    /* ===== Ajuste vertical Inicio ===== */
    #inicio {
      margin-top:-66px;
    }

    /* Banner ligeramente más alto pero sin aumentar el zoom */
    #inicio .inicio-hero {
      height:240px !important;
      min-height:240px !important;
      background-size:cover !important;
      background-position:center 46% !important;
    }

    /* Menos aire vertical entre bloques */
    #inicio .quick {
      margin-top:10px !important;
      margin-bottom:10px !important;
      gap:10px !important;
    }

    #inicio .operators-panel {
      margin-top:0 !important;
    }

    #inicio .operators-head {
      padding-top:10px !important;
      padding-bottom:7px !important;
    }

    #inicio .op {
      min-height:76px !important;
      padding-top:10px !important;
      padding-bottom:10px !important;
    }

    #inicio .add-operator {
      min-height:64px !important;
    }

    #inicio .inicio-bottom {
      margin-top:12px !important;
    }

    #inicio .coverage-box,
    #inicio .holiday-box {
      min-height:112px !important;
    }

    /* Evitar cualquier scroll horizontal residual */
    html, body {
      overflow-x:hidden !important;
    }

    @media (max-width:900px) {
      #inicio {
        margin-top:-28px;
      }
      #inicio .inicio-hero {
        height:215px !important;
        min-height:215px !important;
      }
    }


    /* ===== Compactación final Inicio ===== */

    #inicio {
      margin-top:-66px !important;
    }

    #inicio .inicio-hero {
      margin-bottom:6px !important;
    }

    #inicio .quick {
      margin-top:4px !important;
      margin-bottom:8px !important;
      gap:10px !important;
    }

    #inicio .quick button {
      min-height:74px !important;
      padding-top:11px !important;
      padding-bottom:11px !important;
    }

    /* Título y leyenda en la misma línea */
    #inicio .operators-head {
      display:flex !important;
      align-items:center !important;
      gap:12px !important;
      flex-wrap:wrap !important;
      padding:8px 14px !important;
      min-height:42px !important;
    }

    #inicio .operators-head h3 {
      margin:0 !important;
      line-height:1.1 !important;
    }

    #inicio .operators-head p {
      margin:0 !important;
      line-height:1.1 !important;
      font-size:11px !important;
    }

    /* Subir y compactar tarjetas de operadores */
    #inicio .ops {
      margin-top:0 !important;
    }

    #inicio .op {
      min-height:70px !important;
      padding-top:8px !important;
      padding-bottom:8px !important;
    }

    #inicio .op .code {
      margin-top:4px !important;
    }

    #inicio .turn-detail {
      margin-top:1px !important;
    }

    #inicio .add-operator {
      min-height:56px !important;
      padding-top:8px !important;
      padding-bottom:8px !important;
    }

    /* Paneles inferiores un poco más compactos */
    #inicio .inicio-bottom {
      margin-top:8px !important;
    }

    #inicio .coverage-box,
    #inicio .holiday-box {
      min-height:100px !important;
    }

    /* Evita separación vertical extra del main solo en Inicio */
    main {
      overflow-x:hidden !important;
    }

    @media (max-width:900px) {
      #inicio {
        margin-top:-40px !important;
      }
      #inicio .operators-head {
        align-items:flex-start !important;
      }
    }


    /* ===== Inicio con hero pegado arriba ===== */

    /* El main conserva su padding para los otros módulos */
    #inicio {
      margin-top:0 !important;
    }

    /* Solo Inicio "sale" del padding superior/lateral del main para usar
       todo el ancho disponible y llegar arriba del área principal. */
    #inicio.show {
      margin-top:-78px !important;
      margin-left:-20px !important;
      margin-right:-20px !important;
      width:calc(100% + 40px) !important;
    }

    #inicio .inicio-hero {
      height:228px !important;
      min-height:228px !important;
      width:100% !important;
      max-width:none !important;
      margin:0 !important;
      border-radius:0 0 18px 18px !important;
      background-size:cover !important;
      background-position:center 46% !important;
      box-shadow:0 8px 22px rgba(0,0,0,.16) !important;
    }

    /* El contenido inferior recupera márgenes internos */
    #inicio .quick,
    #inicio .operators-panel,
    #inicio .inicio-bottom {
      margin-left:20px !important;
      margin-right:20px !important;
    }

    #inicio .quick {
      margin-top:8px !important;
      margin-bottom:8px !important;
    }

    #inicio .operators-panel {
      margin-top:0 !important;
    }

    #inicio .operators-head {
      padding:7px 14px !important;
      min-height:38px !important;
    }

    #inicio .op {
      min-height:68px !important;
    }

    #inicio .add-operator {
      min-height:54px !important;
    }

    #inicio .inicio-bottom {
      margin-top:8px !important;
      margin-bottom:0 !important;
    }

    #inicio .coverage-box,
    #inicio .holiday-box {
      min-height:96px !important;
    }

    html, body {
      overflow-x:hidden !important;
    }

    @media (max-width:900px) {
      #inicio.show {
        margin-top:-22px !important;
        margin-left:-12px !important;
        margin-right:-12px !important;
        width:calc(100% + 24px) !important;
      }

      #inicio .inicio-hero {
        height:205px !important;
        min-height:205px !important;
        border-radius:0 0 14px 14px !important;
      }

      #inicio .quick,
      #inicio .operators-panel,
      #inicio .inicio-bottom {
        margin-left:12px !important;
        margin-right:12px !important;
      }
    }


    /* ===== Banner exacto 2450x400 ===== */
    #inicio .inicio-hero {
      width:100% !important;
      height:auto !important;
      min-height:0 !important;
      aspect-ratio:2450 / 400 !important;
      background-size:100% 100% !important;
      background-position:center center !important;
      background-repeat:no-repeat !important;
      background-color:#06192a !important;
    }

    /* El navegador solo reduce proporcionalmente; no hace cover ni recorta. */
    @media (max-width:900px) {
      #inicio .inicio-hero {
        aspect-ratio:2450 / 400 !important;
        height:auto !important;
        min-height:0 !important;
        background-size:100% 100% !important;
      }
    }


    /* ===== Ajuste de proporciones Inicio - 17:47 ===== */

    /* Banner: superiores redondeadas; inferiores RECTAS */
    #inicio .inicio-hero {
      border-radius:18px 18px 0 0 !important;
    }

    /* Aprovechar el espacio vertical disponible en los accesos */
    #inicio .quick {
      gap:14px !important;
      margin-top:10px !important;
      margin-bottom:10px !important;
    }

    #inicio .quick button {
      min-height:108px !important;
      padding:20px 20px 17px !important;
    }

    #inicio .quick strong {
      font-size:16px !important;
      margin-bottom:9px !important;
    }

    #inicio .quick span {
      font-size:13px !important;
    }

    /* Panel de operadores con más presencia */
    #inicio .operators-head {
      min-height:46px !important;
      padding:10px 18px !important;
    }

    #inicio .operators-head h3 {
      font-size:17px !important;
    }

    #inicio .operators-head p {
      font-size:12px !important;
    }

    #inicio .ops {
      gap:10px !important;
      padding-top:2px !important;
    }

    #inicio .op {
      min-height:94px !important;
      padding-top:12px !important;
      padding-bottom:12px !important;
    }

    #inicio .op .code {
      font-size:20px !important;
    }

    #inicio .op .name {
      font-size:15px !important;
    }

    #inicio .turn-detail {
      font-size:12px !important;
      margin-top:4px !important;
    }

    /* Franja izquierda preparada para futuras imágenes de turno */
    #inicio .op::before {
      width:72px !important;
    }

    #inicio .add-operator {
      min-height:66px !important;
      margin-top:10px !important;
      margin-bottom:12px !important;
    }

    #inicio .add-operator .plus {
      width:64px !important;
      font-size:30px !important;
    }

    #inicio .add-operator strong {
      font-size:15px !important;
    }

    /* Tarjetas inferiores más aprovechadas */
    #inicio .inicio-bottom {
      margin-top:10px !important;
      gap:14px !important;
    }

    #inicio .coverage-box,
    #inicio .holiday-box {
      min-height:118px !important;
    }

    #inicio .coverage-box {
      padding:18px 26px !important;
    }

    @media (max-width:900px) {
      #inicio .quick button {
        min-height:92px !important;
      }

      #inicio .op {
        min-height:84px !important;
      }

      #inicio .coverage-box,
      #inicio .holiday-box {
        min-height:105px !important;
      }
    }


    /* ===== Ajuste final de proporciones antes del embellecimiento ===== */

    /* Operadores: un poco más altos para preparar imágenes de turno */
    #inicio .op {
      min-height:108px !important;
      padding-top:15px !important;
      padding-bottom:15px !important;
    }

    #inicio .op::before {
      width:82px !important;
    }

    #inicio .op .name {
      font-size:15px !important;
      margin-bottom:4px !important;
    }

    #inicio .op .code {
      font-size:22px !important;
      line-height:1.05 !important;
      margin-bottom:5px !important;
    }

    #inicio .turn-detail {
      font-size:13px !important;
      line-height:1.25 !important;
    }

    /* Añadir operador acompaña la nueva proporción */
    #inicio .add-operator {
      min-height:72px !important;
      margin-top:10px !important;
      margin-bottom:14px !important;
    }

    #inicio .add-operator .plus {
      width:72px !important;
      font-size:31px !important;
    }

    /* Tarjetas inferiores aprovechan el espacio disponible */
    #inicio .inicio-bottom {
      margin-top:10px !important;
      gap:14px !important;
    }

    #inicio .coverage-box,
    #inicio .holiday-box {
      min-height:136px !important;
    }

    #inicio .coverage-box {
      padding:20px 28px !important;
    }

    /* Mantener accesos superiores en su proporción actual */
    #inicio .quick button {
      min-height:108px !important;
    }

    @media (max-width:900px) {
      #inicio .op {
        min-height:90px !important;
      }

      #inicio .op::before {
        width:68px !important;
      }

      #inicio .coverage-box,
      #inicio .holiday-box {
        min-height:112px !important;
      }
    }

    /* ===== Redistribución vertical v2 ===== */
    #inicio .quick button {
      min-height:114px !important;
    }
    #inicio .operators-panel {
      padding-bottom:4px !important;
    }
    #inicio .ops {
      gap:14px !important;
      padding-top:4px !important;
    }
    #inicio .op {
      min-height:120px !important;
      padding-top:17px !important;
      padding-bottom:17px !important;
    }
    #inicio .op::before {
      width:88px !important;
    }
    #inicio .add-operator {
      min-height:74px !important;
      margin-top:12px !important;
      margin-bottom:16px !important;
    }
    #inicio .inicio-bottom {
      margin-top:18px !important;
      gap:16px !important;
    }
    #inicio .coverage-box,
    #inicio .holiday-box {
      min-height:136px !important;
    }
    @media (max-width:900px) {
      #inicio .quick button { min-height:94px !important; }
      #inicio .ops { gap:10px !important; }
      #inicio .op { min-height:92px !important; }
      #inicio .op::before { width:70px !important; }
      #inicio .inicio-bottom { margin-top:10px !important; }
    }

  
    

  
    

  
    /* ===== SGT INICIO · CALIBRADO CON BARRA GOOGLE 10-08-2026 ===== */

    /* Banner: esquinas inferiores rectas */
    #inicio .inicio-hero {
      border-radius:18px 18px 0 0 !important;
      overflow:hidden !important;
    }

    /* Navegación: conservar presencia pero recuperar altura */
    #inicio .quick {
      gap:12px !important;
      margin-top:7px !important;
      margin-bottom:7px !important;
    }
    #inicio .quick button {
      min-height:88px !important;
      padding:13px 16px !important;
    }

    /* Panel de operadores */
    #inicio .operators-head {
      min-height:35px !important;
      padding:5px 15px !important;
      display:flex !important;
      align-items:center !important;
      gap:11px !important;
    }

    #inicio .ops {
      row-gap:8px !important;
      column-gap:12px !important;
      padding-top:5px !important;
    }

    #inicio .op {
      min-height:91px !important;
      padding-top:11px !important;
      padding-bottom:11px !important;
    }

    #inicio .op::before {
      width:76px !important;
    }

    #inicio .op .name {
      font-size:14px !important;
      margin-bottom:3px !important;
    }

    #inicio .op .code {
      font-size:21px !important;
      line-height:1 !important;
      margin-bottom:4px !important;
    }

    #inicio .turn-detail {
      font-size:12px !important;
      line-height:1.15 !important;
    }

    /* Añadir operador */
    #inicio .add-operator {
      min-height:57px !important;
      margin-top:8px !important;
      margin-bottom:9px !important;
    }

    #inicio .add-operator .plus {
      width:64px !important;
      font-size:27px !important;
    }

    /* Paneles inferiores: ligeramente compactos para dejar margen de seguridad */
    #inicio .inicio-bottom {
      margin-top:10px !important;
      margin-bottom:10px !important;
      gap:12px !important;
    }

    #inicio .coverage-box,
    #inicio .holiday-box {
      min-height:105px !important;
    }

    #inicio .coverage-box {
      padding:14px 22px !important;
    }

    /* Reserva inferior para que la barra de Google no provoque scroll */
    #inicio {
      padding-bottom:4px !important;
    }

    @media (max-width:900px) {
      #inicio .quick button { min-height:82px !important; }
      #inicio .op { min-height:82px !important; }
      #inicio .op::before { width:68px !important; }
      #inicio .coverage-box,
      #inicio .holiday-box { min-height:96px !important; }
    }

  
    /* ===== SGT INICIO · RETOQUES FINALES ===== */

    /* Banner:
       - superior izquierda recta
       - superior derecha redondeada
       - inferiores rectas
    */
    #inicio .inicio-hero {
      border-radius:0 18px 0 0 !important;
      overflow:hidden !important;
    }

    /* Cobertura: texto secundario con más presencia y un poco más a la derecha */
    #inicio .coverage-box .coverage-sub,
    #inicio .coverage-box .coverage-text,
    #inicio .coverage-box p {
      font-size:14px !important;
      margin-left:18px !important;
      line-height:1.25 !important;
    }

  
    /* ===== SGT · FONDOS VISUALES DE TURNOS 10-08-2026 ===== */
    #inicio .op.manana,
    #inicio .op.tarde,
    #inicio .op.noche,
    #inicio .op.descanso {
      background-position:center center !important;
      background-repeat:no-repeat !important;
      background-size:100% 100% !important;
      overflow:hidden !important;
      padding-left:92px !important;
      text-shadow:0 1px 0 rgba(255,255,255,.92);
    }
    #inicio .op.manana { background-image:url("assets/embedded/embedded-02.jpg") !important; }
    #inicio .op.tarde { background-image:url("assets/embedded/embedded-03.jpg") !important; }
    #inicio .op.noche { background-image:url("assets/embedded/embedded-04.jpg") !important; }
    #inicio .op.descanso { background-image:url("assets/embedded/embedded-05.jpg") !important; }

    /* La franja e icono ya forman parte de estos cuatro fondos. */
    #inicio .op.manana::before,
    #inicio .op.tarde::before,
    #inicio .op.noche::before,
    #inicio .op.descanso::before { display:none !important; }

    /* Mantener el texto por encima del fondo y dentro del área clara. */
    #inicio .op > * { position:relative; z-index:1; }

  
/* SGT: fondos de turno ya contienen su propio icono visual */
#inicio .shift-icon,
#inicio .turn-icon,
#inicio .op-icon,
#inicio .visual-icon,
#inicio .turno-icon,
#inicio .estado-icon {
  display: none !important;
}


/* ===== SGT · AJUSTE PROPORCIÓN NOCHE / MAÑANA =====
   Evita deformar las imágenes: recorta manteniendo proporción.
*/
#inicio .op.noche,
#inicio .op.manana,
#inicio .op.mañana {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* En estas dos tarjetas el punto de interés está un poco hacia la derecha */
#inicio .op.noche {
  background-position: 56% center !important;
}

#inicio .op.manana,
#inicio .op.mañana {
  background-position: 56% center !important;
}





/* ===== SGT · AJUSTE FINAL CENTRADO + SIN LÍNEAS ===== */

/* Noche y Mañana:
   conservar proporción y centrar el fondo real en ambos ejes.
   Esto centra también el sol/luna de la franja izquierda dentro de la altura visible.
*/
#inicio .op.noche,
#inicio .op.manana,
#inicio .op.mañana {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* El bloque Añadir operador queda limpio:
   sin marco exterior, sin línea punteada, sin separadores ni pseudo-bordes.
*/
#inicio .add-operator,
#inicio .add-operator:hover,
#inicio .add-operator:focus,
#inicio .add-operator:active {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Quitar cualquier línea interna que provenga de sus hijos. */
#inicio .add-operator *,
#inicio .add-operator *::before,
#inicio .add-operator *::after,
#inicio .add-operator::before,
#inicio .add-operator::after {
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Mantener visible y clickeable el botón, pero sin dibujar un cuadro alrededor. */
#inicio .add-operator {
  overflow: visible !important;
}


/* ===== SGT 21:20 · AJUSTE REAL ===== */
#inicio .op.noche,
#inicio .op.manana,
#inicio .op.mañana {
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* El cuadro visible era .operators-panel, no .add-operator */
#inicio .operators-panel {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Conservamos solo la separación bajo el título */
#inicio .operators-head {
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
}

/* Añadir operador sin marco propio */
#inicio .add-operator,
#inicio .add-operator:hover,
#inicio .add-operator:focus,
#inicio .add-operator:active {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}


/* ===== SGT 21:24 · RESTAURAR AÑADIR OPERADOR SIN RECREAR EL CUADRO ===== */
#inicio .operators-panel{
  padding-bottom:10px !important;
  overflow:visible !important;
}

#inicio .add-operator{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  width:calc(50% - 24px) !important;
  min-height:58px !important;
  margin:8px 16px 2px !important;
  padding:0 !important;
  background:#f7fbff !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:8px !important;
  align-items:stretch !important;
}

#inicio .add-operator .plus{
  display:grid !important;
  place-items:center !important;
  width:64px !important;
  flex:0 0 64px !important;
  margin:0 !important;
  background:#e8f2fc !important;
  color:#1f64aa !important;
  border:0 !important;
  border-radius:8px 0 0 8px !important;
}

#inicio .add-operator > div:last-child{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  padding:8px 12px !important;
}

@media(max-width:900px){
  #inicio .add-operator{
    width:calc(100% - 32px) !important;
  }
}


/* ===== SGT 21:27 · QUITAR LÍNEAS DEBAJO DE LAS TARJETAS ===== */

/* La línea visible era el borde inferior/sombra de cada tarjeta de operador. */
#inicio .op {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Evitar que pseudo-elementos dibujen una línea en el borde inferior. */
#inicio .op::before,
#inicio .op::after {
  box-shadow: none !important;
  border-bottom: 0 !important;
}


/* ===== SGT 21:30 · ELIMINAR LÍNEA RESIDUAL REAL ===== */

/*
  La línea que queda visible está en el borde visual inferior del fondo de la
  tarjeta. La ocultamos desde CSS recortando unos píxeles del fondo, sin editar
  ni generar ninguna imagen.
*/
#inicio .op.noche,
#inicio .op.manana,
#inicio .op.mañana,
#inicio .op.tarde,
#inicio .op.descanso {
  background-size: 100% calc(100% + 8px) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Ningún elemento de la cuadrícula dibuja separadores horizontales. */
#inicio .ops {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#inicio .ops::before,
#inicio .ops::after {
  content: none !important;
  display: none !important;
}

/* Mantener las tarjetas separadas únicamente por el espacio del grid. */
#inicio .op {
  outline: 0 !important;
}

/* ===== SGT · PRUEBA PANEL INDUSTRIAL OSCURO =====
   Fondo azul petróleo para integrar las tarjetas visuales y reducir el
   contraste de cualquier línea residual, sin alterar la lógica ni el grid.
*/
#inicio .operators-panel {
  background: #172733 !important;
  border: 1px solid #223c4b !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(8, 20, 28, .18) !important;
  overflow: hidden !important;
}

#inicio .operators-head {
  background: transparent !important;
  border: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  box-shadow: none !important;
  padding: 10px 16px 8px !important;
}

#inicio .operators-head h3 {
  color: #eef7fb !important;
}

#inicio .operators-head p {
  color: #9fb9c7 !important;
}

#inicio .ops {
  background: transparent !important;
}

#inicio .add-operator,
#inicio .add-operator:hover,
#inicio .add-operator:focus,
#inicio .add-operator:active {
  background: #203746 !important;
  color: #eaf3f8 !important;
  box-shadow: inset 0 0 0 1px rgba(166, 201, 220, .12) !important;
}

#inicio .add-operator .plus {
  background: #29495c !important;
  color: #8fc8eb !important;
}

#inicio .add-operator strong {
  color: #eaf3f8 !important;
}

#inicio .add-operator span {
  color: #a9c0ce !important;
}

/* ===== SGT · ACCESOS RÁPIDOS TECNOLÓGICOS ===== */
#inicio .quick {
  gap: 12px !important;
}

#inicio .quick button,
#inicio .quick button:nth-child(1),
#inicio .quick button:nth-child(2),
#inicio .quick button:nth-child(3),
#inicio .quick button:nth-child(4) {
  --quick-accent: #35a7ff;
  min-height: 96px !important;
  padding: 14px 56px 14px 16px !important;
  overflow: hidden !important;
  text-align: left !important;
  background: linear-gradient(145deg, #183243 0%, #102532 100%) !important;
  border: 1px solid rgba(133, 188, 219, .22) !important;
  border-bottom: 3px solid var(--quick-accent) !important;
  border-radius: 13px !important;
  box-shadow: 0 6px 15px rgba(5, 18, 27, .18), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

#inicio .quick button:nth-child(2) { --quick-accent: #2dd4bf; }
#inicio .quick button:nth-child(3) { --quick-accent: #a879ff; }
#inicio .quick button:nth-child(4) { --quick-accent: #ff9f43; }

#inicio .quick button::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--quick-accent) 18%, transparent), transparent 48%) !important;
  opacity: .8 !important;
}

#inicio .quick button::after {
  content: '›' !important;
  right: 16px !important;
  top: 50% !important;
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  transform: translateY(-50%) !important;
  border: 1px solid color-mix(in srgb, var(--quick-accent) 48%, transparent) !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--quick-accent) 12%, transparent) !important;
  color: var(--quick-accent) !important;
  font-size: 23px !important;
  line-height: 1 !important;
  transition: transform .18s ease, background .18s ease !important;
}

#inicio .quick strong {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 8px !important;
  color: #f2f8fb !important;
  font-size: 15px !important;
  letter-spacing: .02em !important;
}

#inicio .quick > button > span {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  color: #a9bdc9 !important;
  font-size: 12px !important;
}

#inicio .quick-icon {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--quick-accent) 14%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--quick-accent) 34%, transparent) !important;
  color: var(--quick-accent) !important;
}

#inicio .quick-icon svg {
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#inicio .quick button:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--quick-accent) 58%, #203746) !important;
  box-shadow: 0 10px 22px rgba(5, 18, 27, .28), 0 0 15px color-mix(in srgb, var(--quick-accent) 18%, transparent) !important;
}

#inicio .quick button:hover::after {
  transform: translate(2px, -50%) !important;
  background: color-mix(in srgb, var(--quick-accent) 21%, transparent) !important;
}

#inicio .quick button:focus-visible {
  outline: 2px solid var(--quick-accent) !important;
  outline-offset: 3px !important;
}

/* ===== SGT · COBERTURA Y FERIADO MODERNIZADOS ===== */
#inicio .inicio-bottom {
  border: 0 !important;
  background: transparent !important;
}

#inicio .coverage-box {
  background: linear-gradient(135deg, #1b7650 0%, #145d40 100%) !important;
  border: 1px solid rgba(133, 220, 174, .28) !important;
  border-radius: 13px !important;
  color: #f2fff8 !important;
  box-shadow: 0 7px 18px rgba(12, 54, 38, .20) !important;
  padding: 16px 24px !important;
}

#inicio .coverage-box > div {
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
}

#inicio .coverage-box .cov-title {
  color: #ffffff !important;
  font-size: 17px !important;
  letter-spacing: .02em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .16) !important;
}

#inicio .coverage-box .cov-detail {
  margin: 8px 0 0 !important;
  color: #d8f5e6 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

#inicio .coverage-box.aviso {
  background: linear-gradient(135deg, #8a641b 0%, #684a12 100%) !important;
  border-color: rgba(255, 218, 129, .32) !important;
}

#inicio .holiday-box {
  grid-template-columns: 140px 92px 1fr !important;
  gap: 16px !important;
  padding: 10px 24px 10px 14px !important;
  background: linear-gradient(135deg, #fff8f8 0%, #fff1f1 100%) !important;
  border: 1px solid rgba(186, 48, 48, .17) !important;
  border-radius: 13px !important;
  box-shadow: 0 7px 18px rgba(88, 24, 24, .10) !important;
  overflow: hidden !important;
}

#inicio .chile-flag {
  width: 132px !important;
  height: 84px !important;
  margin: auto !important;
  background-image: url("assets/embedded/embedded-06.png") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

#inicio .chile-flag::before,
#inicio .chile-flag::after {
  content: none !important;
  display: none !important;
}

#inicio .holiday-count {
  align-self: center !important;
  padding: 2px 18px 2px 0 !important;
  border-right: 1px solid rgba(155, 35, 35, .20) !important;
  color: #a52121 !important;
  line-height: 1.05 !important;
}

#inicio .holiday-count svg {
  width: 17px !important;
  height: 17px !important;
  margin-bottom: 3px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#inicio .holiday-count b {
  margin: 4px 0 !important;
  font-size: 25px !important;
}

#inicio .holiday-info {
  padding: 8px 12px !important;
  text-align: center !important;
}

#inicio .holiday-info .holiday-title {
  margin-bottom: 9px !important;
  color: #9e2020 !important;
  font-size: 15px !important;
}

@media (max-width: 900px) {
  #inicio .holiday-box {
    grid-template-columns: 110px 80px 1fr !important;
    gap: 10px !important;
    padding-left: 10px !important;
  }
  #inicio .chile-flag {
    width: 104px !important;
    height: 70px !important;
  }
}

/* ===== SGT · ACCIONES FUNCIONALES DEL CALENDARIO ===== */
#calendario .calendar-actions {
  display: flex !important;
  align-items: flex-end !important;
  gap: 9px !important;
  flex-wrap: wrap !important;
}

#calendario .calendar-action {
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

#calendario .calendar-action svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#calendario .calendar-action:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 13px rgba(16, 57, 93, .18) !important;
}

#calendario .calendar-action.share {
  background: #2c8a5b !important;
  border-color: #24754c !important;
}

#calendario .calendar-action.detail {
  background: #5b6f82 !important;
  border-color: #4a5c6c !important;
}

#calendario .calendar-action[disabled] {
  opacity: .65 !important;
  cursor: wait !important;
  transform: none !important;
}

#calendario .cal-detail {
  width: 100% !important;
  min-width: 1080px !important;
  table-layout: fixed !important;
  border-collapse:separate !important;
  border-spacing:3px !important;
  padding:3px !important;
  font-size: 12px !important;
}

#calendario .cal-detail th,
#calendario .cal-detail td {
  width: 135px !important;
  min-width: 135px !important;
  height: 46px !important;
  padding: 6px 8px !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  border:0 !important;
  border-radius:8px !important;
}

#calendario .cal-detail .date-col {
  width: 110px !important;
  min-width: 110px !important;
  text-align: left !important;
}

#calendario .cal-detail .day-col {
  width: 100px !important;
  min-width: 100px !important;
}

#calendario .cal-detail .holiday-col {
  width: auto !important;
  min-width: 360px !important;
  text-align: left !important;
}

#calendario .cal-detail thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  height: 44px !important;
  background: #e7edf1 !important;
}

#calendario .cal-detail td b {
  font-size: 12px !important;
}

#calendario.detail-mode .calwrap{height:min(625px,calc(100vh - 305px));min-height:440px;overflow:hidden;background:#142b39;border:0;padding:7px;display:flex;flex-direction:column}
body.calendar-detail-active .app{height:calc(100vh - 20px);min-height:0}
body.calendar-detail-active main{overflow:hidden}
.detail-grid{display:none;min-height:0;flex:1}.detail-head,.detail-row{display:grid;gap:4px}.detail-head{flex:0 0 auto;padding:0 1px 6px;position:relative;z-index:5;background:#142b39;box-shadow:0 7px 0 #142b39}.detail-head>div{height:44px;display:flex;align-items:center;justify-content:center;background:#e7edf1;color:#173047;border-radius:8px;font-size:11px;font-weight:900}.detail-head>div:first-child,.detail-head>div:last-child{justify-content:flex-start;padding-left:10px}.detail-body{min-height:0;flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none}.detail-body::-webkit-scrollbar{width:0;height:0}.detail-rows{display:grid;gap:4px}.detail-row>div{height:46px;border-radius:8px;display:flex;align-items:center;justify-content:center;min-width:0;font-size:12px;font-weight:800}.detail-date{background:#f2f6f8;color:#18364e;justify-content:flex-start!important;padding:0 10px}.detail-day{background:#eaf0f4;color:#29465d}.detail-day.special{background:#f9dede;color:#c32626}.detail-observation{background:#eef3f6;color:#314d61!important;justify-content:flex-start!important;padding:0 8px;gap:5px;overflow:hidden}.obs-chip{display:inline-flex;align-items:center;max-width:180px;padding:5px 7px;border-radius:999px;background:#dbe7ee;color:#29465d;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.obs-chip.holiday{background:#fde2e2;color:#ad2222}.obs-chip.vac{background:#efe2fa;color:#7443a4}.obs-chip.cover{background:#ffe7cc;color:#985411}.cal-wheel-note{color:#b9cbd6;text-align:center;font-size:11px;font-weight:800;padding:8px}.detail-grid .cal-load-more{color:#b9cbd6}
#calendario.detail-mode #monthlyTable{display:none}.detail-mode .detail-grid{display:flex;flex-direction:column}

#calendario .cal-load-more {
  display: none;
  min-height: 52px;
  place-items: center;
  color: #5f7180;
  font-size: 12px;
  font-weight: 750;
}

#calendario .cal-load-more.show {
  display: grid;
}

.vac-shell{display:grid;grid-template-columns:minmax(720px,960px) 360px;gap:16px;align-items:start;justify-content:start}
.vac-control{background:linear-gradient(145deg,#15394d,#102d3e);border:1px solid #2a5268;border-radius:16px;padding:18px;color:#fff;box-shadow:0 12px 26px rgba(15,42,58,.16)}
.vac-control .toolbar{margin:0;gap:9px}.vac-control .field{min-width:145px;flex:1}.vac-control .field:first-child{max-width:210px}.vac-control label{color:#bcd0dc}.vac-control .input{width:100%;padding:9px 11px}
.vac-register{background:#22a06b;border-color:#22a06b}.vac-register:hover{background:#188457}
.vac-share{background:#2d6aa0;border-color:#2d6aa0}.vac-share:hover{background:#245985}
.vac-summary{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:10px;margin-top:14px}
.vac-stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:11px;text-align:center}
.vac-stat b{display:block;font-size:16px}.vac-stat span{font-size:10px;text-transform:uppercase;color:#bcd0dc;font-weight:800}
.vac-he{background:linear-gradient(145deg,#f4fffa,#e5f8ef);border:1px solid #54c792;border-radius:16px;overflow:hidden;box-shadow:0 12px 24px rgba(24,135,87,.16)}
.vac-he h3{margin:0;padding:15px 16px;background:linear-gradient(100deg,#0e9a63,#23c989);color:white;font-size:14px;letter-spacing:.04em;text-shadow:0 1px 2px rgba(0,0,0,.18)}
.vac-he-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:12px 14px;border-bottom:1px solid #ccebdd;font-size:12px;align-items:center}.vac-he-row span{font-weight:800}.vac-he-row strong:nth-child(2){background:#fff0d8;color:#a45a08;border-radius:999px;padding:5px 8px}.vac-he-row strong:last-child{font-size:15px;color:#08784b;min-width:52px;text-align:right}
.vac-he-total{background:#0c704b;color:#fff;border:0}.vac-he-total strong:last-child{color:#fff;font-size:18px}.vac-he-total span{letter-spacing:.03em}
.vac-calendar{margin-top:16px;background:#142b39;border-radius:16px;padding:14px;overflow:hidden;box-shadow:0 12px 28px rgba(15,42,58,.14)}
.vac-calendar-title{color:#fff;font-size:14px;font-weight:900;letter-spacing:.06em;margin:0 0 12px}
.vac-table-wrap{overflow-x:auto;border-radius:11px;background:#fff}
.vac-table{border-collapse:separate;border-spacing:3px;min-width:100%;width:max-content;padding:4px;font-size:11px}
.vac-table th,.vac-table td{min-width:43px;height:40px;text-align:center;border:0;border-radius:7px;font-weight:800}
.vac-table th{background:#eef2f5;color:#233748;height:29px}.vac-table th.weekend{background:#fde7e7}.vac-table th.sunday{color:#c62828}
.vac-table .vac-name{position:sticky;left:0;z-index:2;min-width:145px;text-align:left;padding:0 12px;background:#f1f5f7;color:#173047}
.vac-table .vac-name.selected{background:#8e63c7;color:#fff}.vac-empty{padding:24px;border-radius:14px;background:#fff4e5;color:#7c5514;font-weight:700}
@media(max-width:1000px){.vac-shell{grid-template-columns:1fr}}

.cfg-layout{display:grid;grid-template-columns:minmax(650px,1.5fr) minmax(500px,.9fr);grid-template-areas:"period info" "titulares info" "apoyo1 apoyo2" "acciones acciones";gap:14px 16px;align-items:start}.cfg-period-card{grid-area:period}.cfg-titulares-card{grid-area:titulares}.cfg-apoyo-principal{grid-area:apoyo1}.cfg-apoyo-secundario{grid-area:apoyo2}.cfg-info{grid-area:info}.cfg-actions{grid-area:acciones}.cfg-card{background:#fff;border:1px solid #cbd5dd;border-radius:15px;overflow:hidden;box-shadow:0 8px 18px rgba(28,48,65,.07)}.cfg-head{background:#183d60;color:#fff;padding:12px 16px;font-size:13px;font-weight:900;letter-spacing:.04em}.cfg-head.green{background:#2d895a}.cfg-body{padding:14px}.cfg-period{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cfg-row{display:grid;grid-template-columns:minmax(180px,1fr) 190px;gap:10px;align-items:center;margin-bottom:9px}.cfg-row:last-child{margin-bottom:0}.cfg-row .input{width:100%}.cfg-support-list{display:grid;gap:9px}.cfg-support-item{display:grid;grid-template-columns:minmax(170px,1fr) 150px 150px 38px;gap:9px;align-items:center}.cfg-support-item .input{height:40px;min-width:0}.cfg-remove{height:40px;border:0;border-radius:9px;background:#f7e5e5;color:#a42121;font-weight:900;cursor:pointer}.cfg-add{border:1px dashed #6eb18c;border-radius:9px;background:#edf8f1;color:#23764e;padding:10px 13px;font-weight:900;cursor:pointer}.cfg-info{background:#f3f7fa;border:1px solid #cad8e2;border-radius:15px;padding:17px;color:#526b7d;line-height:1.5;font-size:12px}.cfg-info h3{margin:0 0 8px;color:#173b59}.cfg-actions{display:flex;gap:10px;flex-wrap:wrap}.cfg-save{background:#2d6aa0}.cfg-regenerate{background:#25875a}.cfg-actions button[disabled]{opacity:.6;cursor:wait}@media(max-width:1320px){.cfg-layout{grid-template-columns:1fr;grid-template-areas:"period" "titulares" "info" "apoyo1" "apoyo2" "acciones"}.cfg-apoyo-secundario:empty{display:none}}@media(max-width:720px){.cfg-support-item{grid-template-columns:1fr 1fr 38px}.cfg-support-item .support-name{grid-column:1/-1}.cfg-support-item [data-apoyo-hasta]{grid-column:2}.cfg-support-item .cfg-remove{grid-column:3;grid-row:2}}
.confirm-sgt{position:fixed;inset:0;z-index:11000;display:none;place-items:center;background:rgba(4,18,28,.7);backdrop-filter:blur(3px)}.confirm-sgt.open{display:grid}.confirm-card{width:min(440px,calc(100vw - 28px));background:#fff;border-radius:17px;box-shadow:0 24px 60px rgba(0,0,0,.32);overflow:hidden}.confirm-title{background:#173e5d;color:#fff;padding:17px 20px;font-size:16px;font-weight:900}.confirm-body{padding:20px;color:#435b6d;line-height:1.5}.confirm-actions{display:flex;justify-content:flex-end;gap:9px;padding:0 20px 20px}.confirm-actions button{height:40px;border:0;border-radius:9px;padding:0 15px;font-weight:900;cursor:pointer}.confirm-cancel{background:#e8edf1;color:#314a5e}.confirm-accept{background:#239362;color:#fff}

/* ===== SGT · AJUSTE VISUAL Y ACTUALIZACIÓN 12-08 ===== */
:root{--m:#f3b900;--t:#f36b21;--n:#3978c2;--d:#49a942;--v:#d85b72;--d12:#d9821b;--n12:#3b659e}
#calendario.detail-mode .calwrap{padding:5px;background:#17303f}
.detail-head,.detail-row{gap:2px}
.detail-head{padding:0 1px 3px;background:#17303f;box-shadow:0 3px 0 #17303f}
.detail-head>div{height:44px;border-radius:7px;font-size:11.5px;letter-spacing:.025em}
.detail-head>div{background:#86c5ce;color:#12334b}
.detail-head>div:first-child,.detail-head>div:nth-child(2){background:#bfc9cf}
.detail-head>div:last-child{background:#a9bbc4}
.detail-rows{gap:2px}
.detail-row>div{height:47px;border-radius:7px;font-size:12.5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.detail-date,.detail-day,.detail-observation{box-shadow:none!important}
.detail-date,.detail-day{background:#c4cdd2;color:#17364d}
.detail-observation{padding:0 10px;gap:7px;color:#223f55!important;background:#d4dfe3}
.detail-row .vacio{background:#9db5bd;color:#526b77}
.obs-chip{max-width:260px;padding:6px 9px;font-size:11.5px;font-weight:850;line-height:1}
.cal-wheel-note{padding:6px}

#inicio .operator-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:8px 16px 12px;background:transparent}
#inicio .operator-actions .add-operator{width:100%!important;min-height:66px!important;height:66px!important;margin:0!important}
#inicio .operator-actions .add-operator .plus{font-size:0!important;background:#176f9f!important;background-image:url("assets/embedded/embedded-07.png")!important;background-size:54px auto!important;background-position:center!important;background-repeat:no-repeat!important}
#inicio .apoyo-slot{height:66px;min-width:0;display:flex;align-items:stretch;justify-content:flex-start;gap:8px;overflow:hidden}
#inicio .apoyo-slot .op{height:66px;min-height:66px;min-width:0;max-width:185px;flex:1 1 145px;margin:0!important;padding:11px 9px 7px 60px!important;border-radius:8px!important;background:#edf5fa!important;color:#173047!important;position:relative;overflow:hidden!important}
#inicio .apoyo-slot .op::before{content:'';position:absolute;left:0;top:0;bottom:0;width:52px;display:block!important;background-color:#1777ad;background-image:url("assets/embedded/embedded-08.png");background-size:58px auto;background-position:center 15%;background-repeat:no-repeat}
#inicio .apoyo-slot .op strong{display:block;color:#173047!important}
#inicio .apoyo-slot .op strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#inicio .apoyo-slot .op .code{font-size:13px!important;color:#176ba0!important;margin-top:3px}
#inicio .apoyo-slot .turn-detail{display:none}
#inicio .apoyo-slot .op::after{content:none!important;display:none!important}
#inicio .operator-actions{padding-bottom:17px}
#inicio .inicio-bottom{margin-top:18px!important}
@media(max-width:900px){#inicio .operator-actions{grid-template-columns:1fr}#inicio .apoyo-slot{display:none}}

.vac-register-stack{display:grid;gap:8px;align-self:end}
.vac-clear{background:#fff!important;border:1px solid #e59494!important;color:#b52c2c!important}
.vac-clear:hover{background:#fff0f0!important;border-color:#cf5656!important}

/* Vacaciones: campos y acciones en líneas independientes. */
.vac-fields{display:grid;grid-template-columns:minmax(170px,210px) repeat(2,minmax(190px,1fr));gap:10px;align-items:end}
.vac-fields .field{max-width:none!important;min-width:0!important}
.vac-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:12px;flex-wrap:wrap}
.vac-actions .btn{min-width:168px}
.vac-actions .vac-share{min-width:118px}
.vac-summary{margin-top:12px}

/* Vacaciones: tema oscuro, acciones modernas y tarjetas de retorno. */
body.vacation-view-active .app{background:linear-gradient(135deg,#0b2135,#102a40)}
body.vacation-view-active main{background:radial-gradient(circle at 60% 0,#17334b 0,#0d2236 48%,#0a1d30 100%);color:#f5f9fc}
body.vacation-view-active #vacaciones .title{color:#fff}
body.vacation-view-active #vacaciones .sub{color:#d3e1eb}
body.vacation-view-active #vacaciones .status{color:#b9cddd}
#vacaciones .vac-control{background:linear-gradient(145deg,#102b42,#091d30);border-color:#294963;box-shadow:0 15px 34px rgba(0,0,0,.28)}
#vacaciones .vac-control .input{background:#10263a;border-color:#385269;color:#fff}
#vacaciones .vac-control .input option{background:#10263a;color:#fff}
#vacaciones .vac-actions{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:12px}
#vacaciones .vac-actions .btn{min-width:0!important;height:48px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:14px;letter-spacing:.01em;box-shadow:0 7px 15px rgba(0,0,0,.22);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
#vacaciones .vac-actions .btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
#vacaciones .vac-actions .btn:hover{transform:translateY(-3px);box-shadow:0 12px 23px rgba(0,0,0,.33);filter:brightness(1.1)}
#vacaciones .vac-actions .btn:hover svg{transform:scale(1.08)}
#vacaciones .vac-actions .btn:active{transform:translateY(-1px);box-shadow:0 7px 14px rgba(0,0,0,.25)}
#vacaciones .vac-register{background:linear-gradient(180deg,#15c953,#079a37);border:1px solid #22db64}
#vacaciones .vac-share{background:linear-gradient(180deg,#2475d2,#174e9c);border:1px solid #3b86dc}
#vacaciones .vac-clear{background:linear-gradient(180deg,#e41414,#a90000)!important;border:1px solid #f04444!important;color:#fff!important}
#vacaciones .vac-clear:hover{background:linear-gradient(180deg,#f01b1b,#bd0000)!important;border-color:#ff6262!important}
#vacaciones .vac-summary{gap:14px}
#vacaciones .vac-stat{min-height:78px;padding:12px 15px;display:grid;grid-template-columns:45px 1fr;grid-template-rows:1fr 1fr;align-items:center;text-align:center;border-radius:12px;color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.22)}
#vacaciones .vac-stat:nth-child(1){background:linear-gradient(135deg,#124f9d,#0b2f66);border:1px solid #2877d0}
#vacaciones .vac-stat:nth-child(2){background:linear-gradient(135deg,#087b91,#064658);border:1px solid #11a4bb}
#vacaciones .vac-stat:nth-child(3){background:linear-gradient(135deg,#672aa2,#35135f);border:1px solid #9852d8}
#vacaciones .vac-stat .vac-stat-icon{grid-row:1/3;width:34px;height:34px;justify-self:center;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
#vacaciones .vac-stat b{align-self:end;font-size:18px;line-height:1.1}
#vacaciones .vac-stat span{align-self:start;color:#fff;font-size:9px;margin-top:4px;letter-spacing:.04em}
#vacaciones .vac-he{background:linear-gradient(145deg,#0b4238,#092e2b);border-color:#13855d;box-shadow:0 14px 30px rgba(0,0,0,.25);color:#fff}
#vacaciones .vac-he h3{background:linear-gradient(100deg,#078653,#13b874)}
#vacaciones .vac-he-row{border-bottom-color:rgba(255,255,255,.12)}
#vacaciones .vac-he-row strong:nth-child(2){background:#543b13;color:#ffd88a}
#vacaciones .vac-he-row strong:last-child{color:#62f1ae}
#vacaciones .vac-he-total{background:#07553d}
#vacaciones .vac-he-total strong:last-child{color:#fff}
#vacaciones .vac-calendar{background:linear-gradient(145deg,#0d273b,#081b2b);border:1px solid #29465d;box-shadow:0 15px 34px rgba(0,0,0,.28)}
#vacaciones .vac-table-wrap{background:#0b2133}
#vacaciones .vac-table{background:#8b9298}
#vacaciones .vac-table th{background:#183247;color:#edf5fa}
#vacaciones .vac-table th.weekend{background:#462e38;color:#ffd5da}
#vacaciones .vac-table th.sunday{color:#ff6b72}
#vacaciones .vac-table .vac-name{background:#132a3c;color:#edf5fa}
#vacaciones .vac-table .vac-name.selected{background:linear-gradient(135deg,#7c43b0,#51257c);color:#fff}
@media(max-width:900px){#vacaciones .vac-actions{grid-template-columns:1fr}#vacaciones .vac-stat{grid-template-columns:38px 1fr}}

/* Buscar fecha: las mismas tarjetas fotográficas de Inicio. */
#buscar .card{background:#f8fafb}
#buscar #buscarOps{gap:10px}
#buscar .search-turn-card{height:96px;min-height:96px;padding:13px 16px 10px 92px;border:1px solid #d4dde4;border-radius:11px;background-position:center;background-repeat:no-repeat;background-size:100% 100%;overflow:hidden;text-shadow:0 1px 0 rgba(255,255,255,.92);box-shadow:0 5px 13px rgba(18,46,64,.09);position:relative}
#buscar .search-turn-card>*{position:relative;z-index:1}
#buscar .search-turn-card strong{font-size:14px;color:#172e42}
#buscar .search-turn-card .code{margin-top:5px;font-size:21px}
#buscar .search-turn-card .search-detail{font-size:12px;margin-top:3px;color:#29465d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#buscar .search-turn-card.vacaciones .code{color:#8c3fad}
#buscar .search-turn-card .code{color:#172e42!important}
#buscar .search-turn-card.noche .code,#buscar .search-turn-card.noche12 .code{color:#432a78!important}

/* Vista mensual: apoyo activo claramente cian; fuera de período gris. */
#calendario:not(.detail-mode){--fondo-apoyo:#e1f2fb}
#calendario:not(.detail-mode) .cal td.support-active-cell{background-color:var(--fondo-apoyo)!important;color:#16658e!important;border:2px solid #fff!important;box-shadow:inset 0 0 0 1px #79b9d2!important;border-radius:6px!important;background-clip:padding-box!important}
#calendario:not(.detail-mode) .cal td.vacio{background:#d8e0e5!important;color:transparent!important}
#calendario:not(.detail-mode) .cal td.support-active-cell b{display:block;color:#12364a!important;text-align:center}

/* Vista mensual: estética de tarjetas como el calendario de vacaciones. */
#calendario:not(.detail-mode) .calwrap{background:#142b39;border:0;border-radius:16px;padding:10px;overflow:hidden;box-shadow:0 12px 28px rgba(15,42,58,.14)}
#calendario:not(.detail-mode) .cal{border-collapse:separate;border-spacing:2px;background:#cbd4da;border-radius:10px;padding:4px;font-size:10.5px}
#calendario:not(.detail-mode) .cal th,
#calendario:not(.detail-mode) .cal td{border:0;height:40px;border-radius:5px;padding:1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
#calendario:not(.detail-mode) .cal th{height:34px;background:#dce3e7;color:#223b50;font-weight:900}
#calendario:not(.detail-mode) .cal th.special{background:#fde3e3;color:#c62828}
#calendario:not(.detail-mode) .cal .name{width:112px;background:#d7dfe4;color:#173047;padding-left:9px;box-shadow:none}
#calendario:not(.detail-mode) .cal td.name.has-vacation{background:#9063c8;color:#fff}
#calendario:not(.detail-mode) .cal td.name.support{background-color:var(--fondo-apoyo)!important;color:#16658e}
#calendario:not(.detail-mode) .cal td b{font-size:10.5px}
@media(max-width:1000px){.vac-fields{grid-template-columns:1fr}.vac-actions{justify-content:flex-start}}

.share-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: none !important;
  place-items: center !important;
  padding: 24px !important;
  background: rgba(3, 16, 26, .72) !important;
  backdrop-filter: blur(3px) !important;
}

.share-modal.open {
  display: grid !important;
}

.share-dialog {
  position: relative !important;
  width: min(1120px, 94vw) !important;
  height: min(780px, 90vh) !important;
  overflow: hidden !important;
  border: 1px solid rgba(170, 207, 226, .38) !important;
  border-radius: 16px !important;
  background: #f4f7fa !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .40) !important;
}

.share-dialog iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #f4f7fa !important;
}

.share-close {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  z-index: 2 !important;
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #c9d5df !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #17365d !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .14) !important;
}

@media (max-width: 700px) {
  .share-modal { padding: 8px !important; }
  .share-dialog {
    width: 100% !important;
    height: 94vh !important;
    border-radius: 12px !important;
  }
}

/* Inicio: cierre definitivo de las tarjetas compactas de apoyo. */
#inicio .operator-actions{
  align-items:stretch!important;
  padding-bottom:14px!important;
}
#inicio .apoyo-slot{
  height:66px!important;
  gap:9px!important;
  overflow:hidden!important;
}
#inicio .apoyo-slot .op{
  box-sizing:border-box!important;
  height:66px!important;
  min-height:66px!important;
  max-width:185px!important;
  padding:11px 8px 7px 66px!important;
  border:1px solid #bfd0dc!important;
  border-radius:8px!important;
  background:#edf5fa!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85)!important;
  overflow:hidden!important;
}
#inicio .apoyo-slot .op::before{
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:57px!important;
  border-radius:7px 0 0 7px!important;
  background-size:50px auto!important;
  background-position:center!important;
  overflow:hidden!important;
}
#inicio .apoyo-slot .op strong,
#inicio .apoyo-slot .op .code{
  position:relative!important;
  z-index:2!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#inicio .inicio-bottom{margin-top:23px!important}

/* Vista mensual: banner temático automático según el mes seleccionado. */
#calendario .calendar-hero{
  border-radius:16px;
  margin-bottom:18px;
}
#calendario.month-banner:not(.detail-mode) .calendar-hero{
  width:calc(100% + 40px);
  max-width:none;
  height:auto;
  min-height:0;
  aspect-ratio:2450 / 400;
  box-sizing:border-box;
  padding:27px 30px 25px;
  margin:-78px -20px 18px;
  border-radius:0 20px 0 0!important;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  background-image:linear-gradient(90deg,rgba(2,25,51,.38) 0%,rgba(2,25,51,.16) 42%,rgba(2,25,51,0) 68%),url("assets/embedded/embedded-09.jpg");
  background-size:cover;
  background-position:center 62%;
  background-repeat:no-repeat;
  box-shadow:0 12px 28px rgba(15,42,58,.18);
}
#calendario.month-banner:not(.detail-mode) .calendar-hero .top{
  margin:0;
  position:relative;
  z-index:1;
}
#calendario.month-banner:not(.detail-mode) .calendar-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(90deg,
    rgba(3,18,31,.94) 0%,
    rgba(4,25,42,.78) 34%,
    rgba(4,25,42,.18) 67%,
    rgba(4,25,42,.08) 100%);
}
#calendario.month-banner:not(.detail-mode) .calendar-hero .eyebrow,
#calendario.month-banner:not(.detail-mode) .calendar-hero .title,
#calendario.month-banner:not(.detail-mode) .calendar-hero .sub{
  color:#fff!important;
  text-shadow:0 2px 7px rgba(0,0,0,.72);
}
#calendario.month-banner:not(.detail-mode) .calendar-hero .eyebrow{color:#86d7ff!important}
#calendario.month-banner:not(.detail-mode) .calendar-actions{
  position:relative;
  z-index:1;
  margin:0;
  align-items:end;
}
#calendario.month-banner:not(.detail-mode) .calendar-actions .field label{
  color:#e8f5ff;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
#calendario.month-banner:not(.detail-mode) .calwrap{margin-top:0}

/* Banners mensuales: cada imagen conserva su resolución original. */
@media(max-width:900px){
  #calendario.month-banner:not(.detail-mode) .calendar-hero{
    min-height:270px;
    padding:22px 18px;
    margin:-22px -12px 18px;
    border-radius:0;
    background-position:62% center;
  }
}

/* ===== SGT · CRISTAL INDUSTRIAL COMPACTO 2026-08 ===== */
.app:has(#inicio.show){background:linear-gradient(145deg,#091e2e,#0d2639)!important}
main:has(#inicio.show){
  background:
    radial-gradient(circle at 76% 8%,rgba(40,104,141,.22),transparent 34%),
    linear-gradient(145deg,#0a2030 0%,#0c2537 58%,#081b2a 100%)!important;
}
aside{
  background:
    linear-gradient(155deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,0) 23%),
    linear-gradient(180deg,rgba(17,59,91,.94),rgba(8,34,55,.96))!important;
  border-right:1px solid rgba(143,207,239,.34)!important;
  box-shadow:inset -1px 0 rgba(255,255,255,.08),8px 0 28px rgba(3,17,28,.20)!important;
  backdrop-filter:blur(16px) saturate(118%);
  -webkit-backdrop-filter:blur(16px) saturate(118%);
}
aside::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 8%,rgba(255,255,255,.055) 23%,transparent 39%);
}
aside .nav:not(.active){color:#d2e1ea!important;opacity:.86}
aside .nav{position:relative;overflow:hidden!important;border:1px solid transparent;transition:background .18s ease,border-color .18s ease,transform .18s ease!important}
aside .nav::before{content:'';position:absolute;inset:-70% 54% 34% -22%;transform:rotate(16deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);pointer-events:none;opacity:0;transition:opacity .18s ease}
aside .nav:not(.active):hover{opacity:1;background:rgba(126,190,225,.09)!important;border-color:rgba(166,211,236,.16)!important;transform:translateX(2px)}
aside .nav:hover::before{opacity:1}
aside .nav.active{
  color:#f7fbff!important;
  background:linear-gradient(135deg,rgba(151,211,246,.22),rgba(43,91,125,.18))!important;
  border:1px solid rgba(180,224,248,.42)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.16),0 6px 18px rgba(2,18,29,.18),0 0 13px rgba(71,177,238,.12)!important;
}
#inicio .today-line{
  background:linear-gradient(145deg,rgba(31,67,92,.68),rgba(11,37,55,.52))!important;
  border:1px solid rgba(186,218,236,.38)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.15),0 7px 18px rgba(1,15,25,.2)!important;
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
}
#inicio .quick{gap:12px!important;margin-bottom:8px!important}
#inicio .quick button,
#inicio .quick button:nth-child(1),
#inicio .quick button:nth-child(2),
#inicio .quick button:nth-child(3),
#inicio .quick button:nth-child(4){
  position:relative!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) 32px!important;
  align-items:center!important;
  column-gap:11px!important;
  min-height:96px!important;
  height:96px!important;
  padding:10px 12px!important;
  background:
    linear-gradient(112deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.018) 32%,rgba(255,255,255,0) 58%),
    linear-gradient(145deg,rgba(24,50,67,.82),rgba(8,27,40,.78))!important;
  border:1px solid color-mix(in srgb,var(--quick-accent) 54%,rgba(178,215,235,.30))!important;
  border-bottom:2px solid var(--quick-accent)!important;
  border-radius:13px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 17px rgba(1,15,24,.23),0 0 10px color-mix(in srgb,var(--quick-accent) 10%,transparent)!important;
  backdrop-filter:blur(13px) saturate(120%);
  -webkit-backdrop-filter:blur(13px) saturate(120%);
}
#inicio .quick button::before{
  background:linear-gradient(118deg,transparent 3%,rgba(255,255,255,.075) 20%,transparent 38%)!important;
  opacity:.9!important;
}
#inicio .quick button::after{
  position:relative!important;right:auto!important;top:auto!important;
  grid-column:3!important;grid-row:1!important;
  width:30px!important;height:30px!important;
  transform:none!important;
  align-self:center!important;justify-self:end!important;
  z-index:2!important;
}
#inicio .quick-icon{
  grid-column:1!important;grid-row:1!important;
  width:58px!important;height:58px!important;flex:none!important;
  border-radius:14px!important;
  background:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--quick-accent) 22%,transparent),transparent 70%)!important;
  box-shadow:none!important;color:inherit!important;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.28));
  transform:translateZ(0);
  transition:transform .18s ease,filter .18s ease!important;
}
#inicio .quick-icon svg{
  width:56px!important;height:56px!important;
  fill:initial!important;stroke:initial!important;stroke-width:initial!important;
  overflow:visible!important;
}
#inicio .quick-copy{
  grid-column:2!important;grid-row:1!important;
  min-width:0!important;position:relative!important;z-index:2!important;
}
#inicio .quick-copy strong{
  display:block!important;margin:0 0 6px!important;
  font-size:15px!important;line-height:1.08!important;color:#f5f9fc!important;
  white-space:nowrap!important;
}
#inicio .quick-copy>span{
  display:block!important;font-size:12px!important;line-height:1.15!important;
  color:#b7c8d2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
#inicio .quick button:hover{
  transform:translateY(-5px)!important;
  background:
    linear-gradient(112deg,rgba(255,255,255,.105),rgba(255,255,255,.022) 38%,transparent 60%),
    linear-gradient(145deg,rgba(28,58,76,.89),rgba(9,31,45,.84))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.19),0 15px 28px rgba(1,14,23,.38),0 0 21px color-mix(in srgb,var(--quick-accent) 28%,transparent)!important;
}
#inicio .quick button::before{background:linear-gradient(110deg,transparent 0 35%,rgba(255,255,255,.28) 46%,transparent 57%)!important;background-size:250% 100%!important;background-position:115% 0!important;transition:background-position .58s ease!important}
#inicio .quick button:hover::before{background-position:-35% 0!important}
#inicio .quick button:hover .quick-icon{transform:scale(1.075);filter:drop-shadow(0 8px 9px rgba(0,0,0,.34)) brightness(1.11)}
#inicio .quick button:hover::after{transform:translateX(2px)!important}
#inicio .operators-panel{
  background:
    linear-gradient(120deg,rgba(255,255,255,.038),transparent 34%),
    rgba(10,31,44,.86)!important;
  border:1px solid rgba(158,198,220,.28)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 9px 24px rgba(2,16,26,.22)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
#inicio .coverage-box{
  background:
    linear-gradient(115deg,rgba(255,255,255,.08),transparent 42%),
    linear-gradient(145deg,rgba(17,76,55,.80),rgba(7,45,34,.77))!important;
  border:1px solid rgba(92,238,157,.52)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 8px 20px rgba(3,28,20,.24),0 0 13px rgba(58,220,131,.12)!important;
  backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);
}
#inicio .holiday-box{
  background:
    linear-gradient(115deg,rgba(255,255,255,.075),transparent 40%),
    linear-gradient(145deg,rgba(73,29,35,.80),rgba(39,17,25,.78))!important;
  border:1px solid rgba(255,111,104,.48)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.10),0 8px 20px rgba(31,5,10,.23),0 0 13px rgba(255,83,76,.10)!important;
  backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);
}
#inicio .holiday-count{color:#ff827c!important;border-right-color:rgba(255,145,139,.26)!important}
#inicio .holiday-info,#inicio .holiday-info .holiday-title{color:#ff9b95!important}

/* Botones sólidos con acabado de vidrio: conservan su color y suman reflejo. */
.btn,.calendar-action,.cfg-add,.cfg-remove,.confirm-actions button,.add-operator,.share-close{
  position:relative!important;overflow:hidden!important;isolation:isolate;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.22),inset 0 -1px rgba(0,0,0,.15),0 6px 14px rgba(12,28,40,.16)!important;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important;
}
.btn::before,.calendar-action::before,.cfg-add::before,.cfg-remove::before,.confirm-actions button::before,.add-operator::before,.share-close::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  width:72%;height:180%;left:-25%;top:-82%;transform:rotate(24deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
  transition:left .35s ease!important;
}
.btn:hover,.calendar-action:hover,.cfg-add:hover,.cfg-remove:hover,.confirm-actions button:hover,.add-operator:hover,.share-close:hover{
  transform:translateY(-2px)!important;filter:brightness(1.08)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.29),inset 0 -1px rgba(0,0,0,.16),0 10px 20px rgba(10,27,39,.24)!important;
}
.btn:hover::before,.calendar-action:hover::before,.cfg-add:hover::before,.cfg-remove:hover::before,.confirm-actions button:hover::before,.add-operator:hover::before,.share-close:hover::before{left:78%}

/* Resumen acumulado hasta hoy. */
#resumen{padding-top:14px}
#resumen .summary-top{margin-bottom:18px}
#resumen .summary-refresh{min-width:128px;background:linear-gradient(145deg,#225f91,#123c62)!important}
.summary-period{
  display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:14px;padding:14px 17px;
  border:1px solid rgba(138,170,190,.30);border-radius:14px;
  background:linear-gradient(118deg,#9aa8b2,#788994);
  box-shadow:inset 0 1px rgba(255,255,255,.9),0 8px 18px rgba(30,48,61,.10);overflow:hidden;position:relative;
}
.summary-period::after,.summary-kpi::after,.summary-table-card::after{content:'';position:absolute;inset:-70% 55% 35% -20%;transform:rotate(13deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);pointer-events:none}
.summary-period span,.summary-kpi span{display:block;font-size:10px;font-weight:900;letter-spacing:.08em;color:#617687}
.summary-period span{color:#e5edf2}.summary-period strong{display:block;margin-top:5px;color:#fff;font-size:15px}.summary-today{text-align:right}
.summary-period-info{min-width:220px}.summary-controls{display:flex;align-items:end;justify-content:flex-end;gap:8px;flex-wrap:wrap;position:relative;z-index:2}.summary-control label{display:block;margin-bottom:4px;color:#e5edf2;font-size:9px;font-weight:900;letter-spacing:.08em}.summary-control select,.summary-control input{height:35px;border:1px solid rgba(255,255,255,.28);border-radius:9px;background:rgba(23,47,64,.72);color:#fff;padding:0 10px;font-weight:800}.summary-control input{width:138px}.summary-custom{display:none;gap:8px}.summary-custom.show{display:flex}.summary-apply{height:35px!important;padding:0 13px!important}
.summary-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:15px}
.summary-kpi{position:relative;overflow:hidden;min-height:108px;padding:16px;border-radius:15px;border:1px solid rgba(255,255,255,.22);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.24),0 9px 20px rgba(15,34,48,.16)}
.summary-kpi span,.summary-kpi small{color:rgba(255,255,255,.78)}
.summary-kpi strong{display:block;margin:8px 0 5px;font-size:26px;line-height:1}.summary-kpi small{font-size:11px}
.summary-kpi.blue{background:linear-gradient(145deg,#245fa8,#143c75)}.summary-kpi.cyan{background:linear-gradient(145deg,#138497,#0a5365)}.summary-kpi.violet{background:linear-gradient(145deg,#7441aa,#45226f)}.summary-kpi.orange{background:linear-gradient(145deg,#d47825,#91440d)}
.summary-table-card{position:relative;overflow:hidden;border:1px solid #c7d1d8;border-radius:15px;background:linear-gradient(145deg,#f8fafb,#e5eaed);box-shadow:inset 0 1px #fff,0 10px 22px rgba(26,44,58,.11)}
.summary-table-title{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:linear-gradient(145deg,#183f60,#102f49);color:#fff}.summary-table-title span{font-size:11px;color:#b9ccd8}
#resumen .tablewrap{border:0;border-radius:0;box-shadow:none}#resumen .table thead{background:#204d70}#resumen .table tbody tr:nth-child(even){background:#eef2f4}#resumen .table tbody tr:hover{background:#dfeaf0}
.summary-table-card{background:linear-gradient(145deg,#a7b2b9,#86959f)}#resumen .tablewrap{background:#a0abb2;padding:7px}#resumen .table{background:#e3e8eb;border-radius:9px;overflow:hidden}#resumen .table td:nth-child(3){background:rgba(255,193,7,.10)}#resumen .table td:nth-child(4){background:rgba(244,115,31,.10)}#resumen .table td:nth-child(5){background:rgba(47,105,190,.11)}#resumen .table td:nth-child(6){background:rgba(57,166,78,.10)}#resumen .table td:nth-child(7){background:rgba(230,139,20,.12)}#resumen .table td:nth-child(8){background:rgba(50,91,151,.13)}#resumen .table td:nth-child(9){background:rgba(215,75,104,.10)}#resumen .table tfoot td{background:#314c5e!important;color:#fff;font-weight:900;border-top:2px solid #6f8796}
.type-chip{display:inline-block;padding:4px 8px;border-radius:999px;background:#dce8ef;color:#28506c;font-size:10px;font-weight:900}
.share-dialog{display:flex!important;flex-direction:column!important;background:linear-gradient(145deg,#405462,#263b49)!important;border-color:rgba(191,218,232,.48)!important}
.share-window-head{height:48px;flex:0 0 48px;display:flex;align-items:center;padding:0 9px 0 18px;color:#f4f8fa;font-weight:900;letter-spacing:.03em;background:linear-gradient(110deg,rgba(255,255,255,.11),rgba(255,255,255,.025));border-bottom:1px solid rgba(255,255,255,.15);box-shadow:inset 0 1px rgba(255,255,255,.15)}
.share-dialog iframe{height:calc(100% - 48px)!important;flex:1;background:#aab6bd!important}
.share-close{position:relative!important;inset:auto!important;margin-left:auto!important;flex:0 0 34px!important;z-index:5!important;width:34px!important;height:34px!important;border-radius:50%!important;background:linear-gradient(145deg,#ef5961,#a91f2c)!important;color:#fff!important;border:1px solid rgba(255,255,255,.38)!important;font-family:Arial,sans-serif!important;font-size:22px!important;line-height:1!important}
.share-close:hover{transform:translateY(-1px) scale(1.06)!important;filter:brightness(1.1)!important}

/* Fondo uniforme para las páginas internas. */
#calendario,#buscar,#resumen,#config{min-height:100%;margin:-28px;padding:76px 28px 34px;background:radial-gradient(circle at 82% 8%,rgba(53,102,132,.22),transparent 31%),linear-gradient(145deg,#132f43,#071d2c 72%);color:#edf4f8}
#calendario .title,#buscar .title,#resumen .title,#config .title{color:#f5f8fa}
#calendario .sub,#buscar .sub,#resumen .sub,#config .sub{color:#afc1cc}
#calendario .card,#buscar .card{background:linear-gradient(145deg,rgba(31,58,75,.94),rgba(13,37,53,.95));border:1px solid rgba(160,195,214,.27);box-shadow:inset 0 1px rgba(255,255,255,.08),0 12px 28px rgba(0,13,22,.28)}
#buscar #buscarMeta{background:rgba(224,231,235,.94);color:#183047;border-color:rgba(255,255,255,.28)}
#config .cfg-card,#config .cfg-info{box-shadow:inset 0 1px rgba(255,255,255,.45),0 10px 24px rgba(0,13,22,.24)}

/* Resumen: contraste controlado sobre las celdas claras. */
#resumen .table tbody{color:#163248}
#resumen .table tbody td{color:#163248;font-weight:750;border-color:rgba(73,98,115,.16)}
#resumen .table tbody td:first-child b,#resumen .table tbody td:last-child b{color:#102d43}
#resumen .table thead th,#resumen .table tfoot td{color:#fff!important}
#resumen .type-chip{background:#cfe0e9;color:#24506b;border:1px solid #afc8d5}
#resumen .status{color:#b7c8d3}

/* Configuración: tarjetas compactas con acabado de vidrio sólido. */
#config .cfg-layout{grid-template-columns:minmax(620px,1.55fr) minmax(330px,.72fr);gap:12px 14px}
#config .cfg-card{background:linear-gradient(145deg,#aeb9c0,#8f9ea7);border:1px solid rgba(201,222,233,.48);box-shadow:inset 0 1px rgba(255,255,255,.52),0 12px 25px rgba(0,14,24,.29)}
#config .cfg-head{display:flex;align-items:center;min-height:43px;background:linear-gradient(115deg,#315b78,#173a55);border-bottom:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px rgba(255,255,255,.15);text-shadow:0 1px 2px rgba(0,0,0,.32)}
#config .cfg-head.green{background:linear-gradient(115deg,#34845f,#17533d)}
#config .cfg-body{padding:12px 14px}
#config .cfg-period .field label{color:#2b4658}
#config .cfg-row{grid-template-columns:minmax(180px,1fr) 185px;margin-bottom:7px;padding:7px;border:1px solid rgba(83,109,125,.30);border-radius:11px;background:linear-gradient(110deg,rgba(239,243,245,.76),rgba(208,217,222,.72));box-shadow:inset 0 1px rgba(255,255,255,.68)}
#config .cfg-row::before{content:'👤';display:grid;place-items:center;position:absolute;width:30px;height:30px;margin:5px 0 0 5px;border-radius:9px;background:#c8d7df;color:#1f4b67}
#config .cfg-row{position:relative}#config .cfg-row>input{padding-left:44px}
#config .cfg-row .input:disabled{opacity:1;background:#d8e0e5;color:#435967;cursor:not-allowed;border-color:#a7b6bf}
#config .cfg-titulares-card .cfg-head{justify-content:space-between}
.cfg-lock{margin-left:auto;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(4,25,39,.38);color:#fff;padding:6px 10px;font-size:10px;font-weight:900;cursor:pointer}.cfg-lock.unlocked{background:#8a4b12;border-color:#eca458}
#config .cfg-info{padding:15px 16px;background:linear-gradient(145deg,rgba(54,76,91,.96),rgba(28,52,68,.97));border:1px solid rgba(174,205,221,.32);color:#d0dde5;box-shadow:inset 0 1px rgba(255,255,255,.12),0 12px 25px rgba(0,14,24,.27)}
#config .cfg-info h3{color:#fff;margin-bottom:11px}#config .cfg-info p{position:relative;margin:0;padding:8px 0 8px 24px;border-top:1px solid rgba(255,255,255,.09)}#config .cfg-info p::before{content:'✓';position:absolute;left:0;color:#5de0a1;font-weight:900}
#config .cfg-add{background:linear-gradient(145deg,#d7e7df,#afcfc0);color:#185d3e;border-color:#579b79}
#config .cfg-actions{position:sticky;bottom:0;z-index:4;padding:10px 12px;border:1px solid rgba(180,207,221,.28);border-radius:13px;background:rgba(13,38,54,.91);box-shadow:0 -5px 18px rgba(0,16,26,.23);backdrop-filter:blur(10px)}
#config .cfg-save{background:linear-gradient(145deg,#3979ab,#22547d)}#config .cfg-regenerate{min-width:210px;background:linear-gradient(145deg,#35a16d,#1f704d);box-shadow:inset 0 1px rgba(255,255,255,.25),0 0 18px rgba(52,201,132,.18)!important}

/* Tema definitivo de Configuración: vidrio oscuro SGT. */
#config .cfg-card{background:linear-gradient(135deg,rgba(31,61,79,.97),rgba(12,37,53,.98));border-color:rgba(137,190,216,.34);box-shadow:inset 0 1px rgba(255,255,255,.12),0 14px 30px rgba(0,12,21,.34);position:relative}
#config .cfg-card::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(116deg,rgba(255,255,255,.075),transparent 27%,transparent 72%,rgba(75,177,220,.045));border-radius:inherit}
#config .cfg-head{position:relative;z-index:1;background:linear-gradient(110deg,rgba(55,103,132,.70),rgba(20,57,79,.58));border-bottom-color:rgba(150,202,226,.25)}
#config .cfg-head.green{background:linear-gradient(110deg,rgba(21,120,123,.72),rgba(13,70,79,.62));color:#edffff}
#config .cfg-body{position:relative;z-index:1;background:linear-gradient(145deg,rgba(24,51,68,.77),rgba(11,35,51,.82));color:#dbe7ed}
#config .cfg-period .field label,#config .cfg-body .field label{color:#bcd0db}
#config .cfg-period .input,#config .cfg-support-item .input{color-scheme:dark;background:linear-gradient(145deg,rgba(57,79,93,.94),rgba(35,58,72,.96));border-color:rgba(151,184,201,.43);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.09)}
#config .cfg-period .input:focus,#config .cfg-support-item .input:focus{border-color:#58c9e1;box-shadow:0 0 0 3px rgba(59,193,219,.16),inset 0 1px rgba(255,255,255,.11)}
#config .cfg-row{background:linear-gradient(110deg,rgba(51,76,91,.88),rgba(29,56,72,.88));border-color:rgba(140,177,196,.31);box-shadow:inset 0 1px rgba(255,255,255,.09)}
#config .cfg-row::before{background:linear-gradient(145deg,#39728f,#214b65);color:#e8f6fc;box-shadow:inset 0 1px rgba(255,255,255,.18)}
#config .cfg-row .input,#config .cfg-row .input:disabled{opacity:1;background:linear-gradient(145deg,rgba(67,91,105,.95),rgba(43,67,82,.97));border-color:rgba(157,187,201,.35);color:#f0f6f9;-webkit-text-fill-color:#f0f6f9}
#config .cfg-row select.input{color-scheme:dark}
#config .cfg-info{background:linear-gradient(145deg,rgba(40,69,87,.97),rgba(18,46,63,.98));border-color:rgba(135,190,216,.34)}
#config .cfg-add{background:linear-gradient(145deg,rgba(26,117,112,.96),rgba(14,74,78,.98));color:#efffff;border:1px solid rgba(100,221,207,.50);box-shadow:inset 0 1px rgba(255,255,255,.15),0 7px 15px rgba(0,20,25,.20)}
#config .cfg-support-list>div[style]{color:#aabfc9!important}
#config .cfg-lock{background:linear-gradient(145deg,rgba(23,48,64,.94),rgba(10,31,45,.96));box-shadow:inset 0 1px rgba(255,255,255,.12)}
#config .cfg-actions{border-color:rgba(123,181,208,.32);background:linear-gradient(110deg,rgba(25,54,72,.95),rgba(10,34,50,.96))}
.auth-sgt{position:fixed;inset:0;z-index:12000;display:none;place-items:center;padding:18px;background:rgba(2,14,23,.78);backdrop-filter:blur(7px)}.auth-sgt.open{display:grid}.auth-card{width:min(410px,calc(100vw - 28px));overflow:hidden;border:1px solid rgba(135,198,224,.42);border-radius:17px;background:linear-gradient(145deg,#24475d,#102f43);box-shadow:inset 0 1px rgba(255,255,255,.13),0 26px 70px rgba(0,0,0,.46)}.auth-title{padding:17px 19px;color:#fff;font-size:16px;font-weight:900;background:linear-gradient(110deg,rgba(62,116,145,.72),rgba(23,62,84,.68));border-bottom:1px solid rgba(255,255,255,.13)}.auth-body{padding:19px;color:#c7d7df;line-height:1.45}.auth-body p{margin:0 0 13px}.auth-input{width:100%;height:44px;padding:0 13px;border:1px solid rgba(156,194,212,.42);border-radius:10px;background:#122f42;color:#fff;font-size:16px;outline:none}.auth-input:focus{border-color:#55c8e2;box-shadow:0 0 0 3px rgba(85,200,226,.14)}.auth-error{min-height:18px;margin-top:9px;color:#ff9c9c;font-size:12px;font-weight:800}.auth-actions{display:flex;justify-content:flex-end;gap:9px;padding:0 19px 19px}.auth-actions button{height:40px;border:0;border-radius:9px;padding:0 15px;font-weight:900;cursor:pointer}.auth-cancel{background:#657986;color:#fff}.auth-accept{background:linear-gradient(145deg,#2fa36d,#176849);color:#fff}
@media(max-width:1320px){#config .cfg-layout{grid-template-columns:1fr}}
@media(max-width:700px){#calendario,#buscar,#resumen,#config{margin:-18px;padding:64px 18px 26px}}
@media(max-width:980px){.summary-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1200px){
  #inicio .quick button{grid-template-columns:50px minmax(0,1fr) 28px!important;column-gap:8px!important;padding:9px!important}
  #inicio .quick-icon{width:50px!important;height:50px!important}
  #inicio .quick-icon svg{width:49px!important;height:49px!important}
  #inicio .quick-copy strong{font-size:13px!important}
}

/* ===== RESPONSIVE FINAL · PC / TABLET / TELÉFONO ===== */
main{background:linear-gradient(145deg,#0a2132,#071b2a)!important}
.brand-mini{display:none}.foot-author{display:block;margin-top:4px;color:#c7d9e4;font-weight:800}.foot-author b{color:#fff;letter-spacing:.08em}

@media(max-width:1500px) and (orientation:landscape){
  #vacaciones .vac-shell{grid-template-columns:1fr!important}
  #vacaciones .vac-he{max-width:none!important}
  .detail-grid{overflow-x:auto!important}
  .detail-head,.detail-body{min-width:900px}
}

@media(max-width:900px){
  .app{grid-template-columns:76px minmax(0,1fr)!important;min-height:100dvh}
  aside{position:sticky!important;top:0;height:100dvh;z-index:20;padding:18px 9px!important;overflow:hidden!important;flex-direction:column!important}
  .brand{display:block!important;padding:0 0 14px!important;text-align:center}.brand-full,.brand>span{display:none!important}.brand-mini{display:flex!important;flex-direction:column;align-items:center;gap:2px;color:#fff}.brand-mini i{font-style:normal;font-size:20px}.brand-mini strong{font-size:13px;letter-spacing:.08em}.brand-mini small{font-size:8px;color:#a9c3d3}
  aside nav{display:grid!important;margin-top:14px!important;gap:8px!important;width:100%}.nav{display:grid;place-items:center;min-width:0!important;width:100%;height:48px;padding:0!important;text-align:center!important;font-size:21px}.nav span{display:none!important}
  .foot{display:block!important;margin-top:auto!important;padding:8px 0 0!important;text-align:center!important;font-size:8px!important}.foot-area{display:none}.foot-author{margin:0;color:#9eb8c8}.foot-author span{display:none}.foot-author b{display:block;font-size:9px}
  main{min-width:0;padding-bottom:max(28px,env(safe-area-inset-bottom))!important}
  .tablewrap,.calwrap,.vac-table-wrap{max-width:100%;overflow-x:auto!important;overscroll-behavior-inline:contain}
  #vacaciones .vac-shell{grid-template-columns:1fr!important}
  #vacaciones .vac-he{max-width:none!important}
}

@media (max-width:650px), (max-device-width:650px), (hover:none) and (max-width:1000px){
  html,body{min-width:0!important;overflow-x:hidden!important;background:#071b2a}
  .app{grid-template-columns:64px minmax(0,1fr)!important;width:100%!important;min-height:100dvh!important;margin:0!important;border-radius:0!important;overflow:visible!important}
  aside{display:flex!important;position:sticky!important;top:0!important;left:0!important;width:64px!important;height:100dvh!important;padding:12px 7px!important;overflow:hidden!important;flex-direction:column!important}
  .brand{display:block!important;padding:0 0 10px!important}.brand-mini i{font-size:18px}.brand-mini strong{font-size:12px}.brand-mini small{font-size:7px}
  aside nav{display:grid!important;overflow:visible!important;margin-top:8px!important;gap:6px!important}.nav{height:46px!important;font-size:22px!important;border-radius:11px!important;touch-action:manipulation}.nav:hover{transform:none!important}
  main{width:100%!important;min-width:0!important;padding:18px 10px max(34px,env(safe-area-inset-bottom))!important;overflow:visible!important}
  .top{align-items:flex-start;gap:10px;margin-bottom:13px}.title{font-size:clamp(24px,7vw,30px)!important}.sub{font-size:13px}.eyebrow{font-size:9px}
  #calendario,#buscar,#resumen,#config{min-height:100dvh;margin:-18px -10px!important;padding:34px 10px 30px!important}

  #inicio .inicio-hero{min-height:152px!important;margin:-18px -10px 10px!important;padding:22px 13px!important;border-radius:0!important}
  #inicio .inicio-title{left:13px!important;top:24px!important;max-width:75%!important}#inicio .inicio-title h1{font-size:25px!important}#inicio .inicio-title .system-name{font-size:13px!important}#inicio .today-line{font-size:10px!important;padding:7px 9px!important;white-space:nowrap}
  #inicio .quick{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  #inicio .quick button{grid-template-columns:42px minmax(0,1fr) 24px!important;min-height:78px!important;height:78px!important;padding:7px!important;column-gap:6px!important}
  #inicio .quick-icon,#inicio .quick-icon svg{width:41px!important;height:41px!important}#inicio .quick-copy strong{font-size:11px!important;white-space:normal!important}#inicio .quick-copy>span{font-size:9px!important}#inicio .quick button::after{width:24px!important;height:24px!important}
  #inicio .ops{grid-template-columns:1fr!important}#inicio .op{min-height:82px!important}#inicio .operators-head p{display:none}
  #inicio .inicio-bottom{grid-template-columns:1fr!important;gap:10px!important}#inicio .coverage-box,#inicio .holiday-box{min-height:104px!important}

  #buscar .card{padding:10px!important}#buscar .toolbar{align-items:stretch}#buscar .field{flex:1;min-width:145px}#buscar .ops{grid-template-columns:1fr!important}
  #vacaciones .vac-fields{grid-template-columns:1fr!important}#vacaciones .vac-actions{grid-template-columns:1fr!important}#vacaciones .vac-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}#vacaciones .vac-stat{min-height:88px!important;padding:8px 5px!important;grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important}#vacaciones .vac-stat svg{width:29px!important;height:29px!important;margin:auto}#vacaciones .vac-stat b{font-size:17px!important}#vacaciones .vac-calendar-title{font-size:13px!important}
  .vac-table-wrap{max-width:calc(100vw - 84px)!important}.vac-table .vac-name{min-width:105px!important}

  #resumen .summary-top{align-items:center}.summary-refresh{min-width:105px!important;padding:0 10px!important}.summary-period{align-items:flex-start;flex-direction:column}.summary-period-info{min-width:0}.summary-controls{width:100%;justify-content:flex-start}.summary-control{flex:1}.summary-control select{width:100%;max-width:100%}.summary-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}.summary-kpi{min-height:94px;padding:12px}.summary-kpi strong{font-size:23px}.summary-table-card{max-width:100%}#resumen .tablewrap{max-width:calc(100vw - 84px)!important}

  #config .cfg-layout{display:grid!important;grid-template-columns:1fr!important;grid-template-areas:'period' 'titulares' 'info' 'apoyo1' 'apoyo2' 'acciones'!important}#config .cfg-period{grid-template-columns:1fr!important}#config .cfg-row{grid-template-columns:minmax(0,1fr) 90px!important}#config .cfg-head{padding:10px!important;font-size:11px!important}.cfg-lock{font-size:8px!important;padding:6px!important}#config .cfg-info{font-size:11px!important}#config .cfg-actions{position:relative!important;display:grid!important;grid-template-columns:1fr!important}.cfg-regenerate{min-width:0!important}

  .share-modal{padding:4px!important}.share-dialog{width:100%!important;height:calc(100dvh - 8px)!important;border-radius:10px!important}.share-window-head{height:44px!important;flex-basis:44px!important;font-size:12px}.share-dialog iframe{height:calc(100% - 44px)!important}
}
/* ===== AJUSTE RESPONSIVE V8 · ESPACIOS, TABLAS Y NAVEGACIÓN ===== */
main{padding-top:28px!important}
#calendario,#buscar,#resumen,#config{margin:-28px -20px -24px!important;padding:28px 20px 34px!important}
.brand .brand-mini{display:none!important}
.language-control{display:grid;grid-template-columns:25px 1fr;align-items:center;gap:6px;margin:0 0 8px;padding:4px 6px;border:1px solid rgba(166,207,229,.30);border-radius:9px;background:rgba(8,34,52,.72)}
.language-control select{width:100%;height:24px;border:0;background:transparent;color:#edf7fc;font-size:11px;font-weight:800;text-align:center;cursor:pointer;outline:0}
.language-control select option{color:#102b3e!important;background:#fff!important;font-weight:800}
.language-flag{position:relative;display:block;width:25px;height:16px;overflow:hidden;border-radius:3px;border:1px solid rgba(255,255,255,.55);box-shadow:0 2px 5px rgba(0,0,0,.35)}
.language-flag.es{background:linear-gradient(to bottom,#fff 0 50%,#d52b1e 50%)}.language-flag.es::before{content:'★';position:absolute;inset:0 auto auto 0;width:8px;height:8px;background:#0039a6;color:#fff;font-size:5px;line-height:8px;text-align:center}
.language-flag.vi{background:#da251d}.language-flag.vi::before{content:'★';position:absolute;inset:50% auto auto 50%;color:#ffdf00;font-size:10px;line-height:1;transform:translate(-50%,-50%)}
.language-flag.en{background:linear-gradient(27deg,transparent 43%,#fff 44% 48%,#c8102e 49% 53%,#fff 54% 58%,transparent 59%),linear-gradient(-27deg,transparent 43%,#fff 44% 48%,#c8102e 49% 53%,#fff 54% 58%,transparent 59%),linear-gradient(to right,transparent 38%,#fff 38% 62%,transparent 62%),linear-gradient(to bottom,transparent 34%,#fff 34% 66%,transparent 66%),#012169}.language-flag.en::before{content:'';position:absolute;inset:0;background:linear-gradient(to right,transparent 44%,#c8102e 44% 56%,transparent 56%),linear-gradient(to bottom,transparent 41%,#c8102e 41% 59%,transparent 59%)}
@media(min-width:901px){
  main{padding-top:78px!important}
  #calendario,#buscar,#resumen,#config{margin:-78px -20px -24px!important;padding:28px 20px 34px!important}
  #inicio{margin-top:-66px!important}
  /* El contenedor ya sube 78 px: el banner solo compensa sus 28 px de padding.
     Así no se recorta arriba y conserva la altura estable de la cabecera de Inicio. */
  #calendario.month-banner:not(.detail-mode) .calendar-hero{
    height:266px!important;
    min-height:266px!important;
    aspect-ratio:auto!important;
    /* Cubre por completo la unión superior: evita la línea oscura visible
       cuando el banner tiene cielo claro (por ejemplo, mayo). */
    margin:-32px -20px 18px!important;
  }
}
@media(min-width:901px) and (min-height:760px){
  #config .top{margin-bottom:14px}#config .cfg-layout{gap:10px 14px}#config .cfg-body{padding:10px 14px}
  #config .cfg-head{min-height:40px;padding-top:9px;padding-bottom:9px}#config .cfg-row{margin-bottom:5px;padding:5px}
  #config .cfg-info p{padding-top:6px;padding-bottom:6px}#config .cfg-actions{position:relative;padding:7px 10px}
}
@media(max-width:900px){
  #calendario:not(.detail-mode) .cal{width:1120px!important;min-width:1120px!important;table-layout:fixed!important}
  #resumen .table{width:900px!important;min-width:900px!important}#vacaciones .vac-table{min-width:max-content!important;width:max-content!important}
  aside .brand-full,aside .brand>span{display:none!important}aside .brand .brand-mini{display:flex!important}aside nav .nav span{display:none!important}
  aside .foot .foot-area,aside .foot .foot-author>span{display:none!important}aside .foot .foot-author,aside .foot .foot-author b{display:block!important}
  .language-control{display:flex!important;flex-direction:column;gap:3px;padding:4px 2px}.language-control select{height:20px;padding:0;font-size:8px}.language-control option{color:#102b3e;background:#fff}.language-flag{width:23px;height:14px}
}
@media (max-width:650px), (max-device-width:650px), (hover:none) and (max-width:1000px){
  .app{grid-template-columns:58px minmax(0,1fr)!important}aside{width:58px!important;padding-left:5px!important;padding-right:5px!important}
  main{padding:12px 8px max(30px,env(safe-area-inset-bottom))!important}
  #calendario,#buscar,#resumen,#config{margin:-12px -8px -30px!important;padding:22px 8px 30px!important}#inicio .inicio-hero{margin:-12px -8px 10px!important}
  .brand-mini i{font-size:17px!important}.brand-mini strong{font-size:11px!important}.brand-mini small{font-size:7px!important}
  aside nav{gap:5px!important}.nav{height:45px!important;font-size:21px!important}aside .foot{width:100%!important}.foot-author b{font-size:8px!important;white-space:nowrap!important}
  .calwrap,.tablewrap,.vac-table-wrap{width:100%!important;max-width:calc(100vw - 74px)!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  #calendario:not(.detail-mode) .cal{width:930px!important;min-width:930px!important}#resumen .table{width:820px!important;min-width:820px!important}
  #vacaciones .vac-table{min-width:max-content!important;width:max-content!important}
}



/* Banners panorámicos optimizados, integrados sin enlaces externos. */
#calendario.month-01:not(.detail-mode) .calendar-hero{background-image:url("assets/embedded/embedded-10.jpg")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
#calendario.month-02:not(.detail-mode) .calendar-hero{background-image:url("assets/embedded/embedded-11.jpg")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
#calendario.month-03:not(.detail-mode) .calendar-hero{background-image:url("assets/embedded/embedded-12.jpg")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
#calendario.month-04:not(.detail-mode) .calendar-hero{background-image:url("assets/embedded/embedded-13.jpg")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
#calendario.month-05:not(.detail-mode) .calendar-hero{background-image:url("assets/embedded/embedded-14.jpg")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
#calendario.month-06:not(.detail-mode) .calendar-hero{background-image:url("assets/embedded/embedded-15.jpg")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
#calendario.month-07:not(.detail-mode) .calendar-hero{background-image:url("assets/embedded/embedded-16.jpg")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}



#calendario.month-08:not(.detail-mode) .calendar-hero{background-image:url("assets/embedded/embedded-17.png")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
#calendario.month-10:not(.detail-mode) .calendar-hero{background-image:url("assets/embedded/embedded-18.png")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}



/* Banners temáticos de septiembre, noviembre y diciembre: integrados sin enlaces externos. */
#calendario.month-09:not(.detail-mode) .calendar-hero{background-image:url("assets/embedded/embedded-19.png")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
#calendario.month-11:not(.detail-mode) .calendar-hero{background-image:url("assets/embedded/embedded-20.png")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
#calendario.month-12:not(.detail-mode) .calendar-hero{background-image:url("assets/embedded/embedded-21.png")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
