/* ═══════════════════════════════════════════════════════════════════════
   drwCheck · estructura y componentes
   ═══════════════════════════════════════════════════════════════════════
   Requiere temas.css (y logo-inestech.css para el pie).

   - Cabecera, menú lateral y pie con la estructura de planner, medidos en
     sus capturas y en planner/app/styles/layout.css y global.css.
   - Menú lateral expandible y contraíble; en pantallas estrechas pasa a
     panel desplegable desde la cabecera.
   - Contenido centrado con un ancho máximo proporcional a la pantalla.
   - Botones, etiquetas, campos, alertas, pestañas y tablas con las medidas
     y estados de Ant Design v5, reproducidos en CSS. La web pública no puede
     cargar librerías; la aplicación de gestión puede usar la propia antd (MIT).
   - El tema "original" recupera el aspecto actual del source.

   Las adaptaciones al ancho usan consultas de contenedor, no de pantalla:
   se comportan igual dentro de la pestaña de Teams que en el navegador.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Marco de página ─────────────────────────────────────────────────── */
.vp {
  display: flex; flex-direction: column; min-height: 100%; min-width: 0;
  container-type: inline-size; container-name: vp;
  background: var(--c-fondo-margen); color: var(--c-texto);
  font: 400 14px/1.5715 var(--f-texto);
}
.vp-contenido { flex: 1; background: var(--c-fondo); min-width: 0; }

.solo-original { display: none; }
[data-tema="original"] .solo-original { display: flex; }
[data-tema="original"] .solo-planner { display: none; }

/* ── Cabecera planner ────────────────────────────────────────────────── */
.cab {
  height: 56px; padding: 0 16px; display: flex; align-items: center; gap: 12px; flex: none;
  background: var(--c-cab-fondo); border-bottom: 1px solid color-mix(in srgb, var(--c-cab-borde) 35%, transparent);
}
.marca {
  font: 500 28px/1 var(--f-marca); letter-spacing: -.01em;
  color: var(--c-marca); margin: 0; white-space: nowrap;
}
.marca b { font-weight: inherit; color: var(--logo-azul); }
.cab-acciones { margin-left: auto; display: flex; align-items: center; gap: 16px; min-width: 0; }
.cab-acciones a { color: var(--c-cab-enlace); text-decoration: none; font-size: 14px; white-space: nowrap; }
.cab-acciones a[aria-current] { box-shadow: inset 0 -2px 0 var(--c-cab-enlace); padding-bottom: 4px; }
.usuario { display: flex; align-items: center; gap: 8px; color: #D9D9D9; font-size: 14px; white-space: nowrap; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); color: #FFFFFF; font-size: 13px; font-weight: 600; }
.btn-menu { display: none; width: 36px; height: 36px; margin-left: -6px; border: 0; border-radius: var(--a-radio);
  background: transparent; color: #FFFFFF; cursor: pointer; place-items: center; }
.btn-menu:hover { background: rgba(255, 255, 255, .1); }
.btn-menu:focus-visible { outline: 3px solid var(--c-sider-activo); outline-offset: 1px; }

/* ── Cabecera original (source) ──────────────────────────────────────── */
.cab-original {
  background: #FFFFFF; border-top: 3px solid #2392D1; border-bottom: 1px solid #E2E4E8;
  padding: 14px 16px; align-items: center; gap: 12px; flex-wrap: wrap; flex: none;
}
.cab-original img { height: 26px; width: auto; display: block; }
.cab-original .rotulo {
  font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: #8E9098; border-left: 1px solid #E2E4E8; padding-left: 12px;
}
.cab-original .cab-acciones a { font-size: 13px; }
.cab-original .usuario { color: #8E9098; font-size: 13px; }

/* ── Aplicación: menú lateral + contenido ────────────────────────────── */
.app-cuerpo { flex: 1; display: flex; min-height: 0; position: relative; }
.sider {
  flex: none; width: 232px; display: flex; flex-direction: column; overflow-y: auto;
  background: var(--c-sider-fondo); transition: width .2s ease;
}
.menu { list-style: none; margin: 0; padding: 12px 8px; display: flex; flex-direction: column; gap: 4px; }
.menu a {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; border-radius: var(--a-radio);
  color: rgba(255, 255, 255, .78); text-decoration: none; font-size: 15px; white-space: nowrap; overflow: hidden;
}
.menu a svg { flex: none; width: 18px; height: 18px; }
.menu a:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
.menu a[aria-current="page"] { background: var(--c-sider-activo); color: #FFFFFF; }
.menu a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }
.menu .separador { height: 1px; margin: 8px; background: rgba(255, 255, 255, .1); }
.sider-pie { margin-top: auto; padding: 12px 8px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, .1); }
.version { color: rgba(255, 255, 255, .45); font-size: 12px; }
.btn-contraer { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3);
  background: transparent; color: rgba(255, 255, 255, .8); cursor: pointer; display: grid; place-items: center; }
.btn-contraer:hover { border-color: #FFFFFF; color: #FFFFFF; }
.btn-contraer:focus-visible { outline: 3px solid var(--c-sider-activo); outline-offset: 2px; }
.btn-contraer svg { transition: transform .2s ease; }

/* Contraído: solo iconos */
.app-cuerpo[data-contraido] .sider { width: 64px; }
.app-cuerpo[data-contraido] .menu a { padding: 0; justify-content: center; }
.app-cuerpo[data-contraido] .menu a span { display: none; }
.app-cuerpo[data-contraido] .btn-contraer svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) { .sider, .btn-contraer svg { transition: none; } }

/* Contenido centrado: ocupa más al crecer la pantalla, sin estirarse sin límite */
.principal { flex: 1; min-width: 0; background: var(--c-fondo-margen); padding: 24px; overflow-y: auto; }
.lienzo { width: min(100%, 1320px); margin: 0 auto; }
.pagina-cab { background: var(--c-superficie); border-radius: var(--a-radio-lg) var(--a-radio-lg) 0 0;
  padding: 20px 24px 0; border-bottom: 1px solid var(--a-borde-sec); }
.pagina-cab h1 { font-size: 24px; font-weight: 500; color: var(--c-titulo); margin: 0 0 16px; }
.pagina-cuerpo { background: var(--c-superficie); border-radius: 0 0 var(--a-radio-lg) var(--a-radio-lg); padding: 24px; }

/* Móvil y tableta estrecha: el menú se abre desde la cabecera */
@container vp (max-width: 760px) {
  .btn-menu { display: grid; }
  .cab .marca { font-size: 24px; }
  .cab .usuario span:last-child { display: none; }
  .sider { position: absolute; inset: 0 auto 0 0; z-index: 10; transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: 4px 0 16px rgba(0, 0, 0, .18); }
  .app-cuerpo[data-menu="abierto"] .sider { transform: none; }
  .app-cuerpo[data-contraido] .sider { width: 232px; }
  .app-cuerpo[data-contraido] .menu a { padding: 0 16px; justify-content: flex-start; }
  .app-cuerpo[data-contraido] .menu a span { display: inline; }
  .btn-contraer { display: none; }
  .principal { padding: 12px; }
  .pagina-cab { padding: 16px 16px 0; }
  .pagina-cab h1 { font-size: 20px; margin-bottom: 12px; }
  .pagina-cuerpo { padding: 16px; }
}

/* Tema original: sin menú lateral, navegación en la cabecera */
[data-tema="original"] .sider { display: none; }
[data-tema="original"] .principal { background: #FFFFFF; }
[data-tema="original"] .pagina-cab,
[data-tema="original"] .pagina-cuerpo { border-radius: 0; background: #FFFFFF; }
[data-tema="original"] .pagina-cab { border-bottom-color: #E2E4E8; }
[data-tema="original"] .pagina-cab h1 { font-weight: 600; }

/* ── Pie planner ─────────────────────────────────────────────────────── */
.pie {
  box-sizing: border-box; min-height: 48px; padding: 8px 16px; display: flex; align-items: center;
  justify-content: center; gap: 16px; flex-wrap: wrap; flex: none; background: var(--c-pie-fondo);
  color: var(--c-pie-texto); border-top: 4px solid var(--c-pie-filete); font-size: 14px; line-height: 1.4;
  text-align: center;   /* 48 px en total, filete incluido */
}
.pie .logo-inestech { height: 22px; }

/* ── Pie original (source) ───────────────────────────────────────────── */
.pie-original { flex-direction: column; flex: none; background: #F2F2F2; border-top: 1px solid #E2E4E8;
  padding: 16px; font-size: 13px; color: #374852; }
.pie-original p { margin: 0; }
.pie-original .legal { margin-top: 8px; font-size: 12px; color: #8E9098; }

/* ── Pestañas (Tabs de antd) ─────────────────────────────────────────── */
.pestanas { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.pestanas a { display: block; padding: 12px 0; color: var(--a-texto); text-decoration: none; font-size: 14px;
  white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
.pestanas a:hover { color: var(--c-primario-hover); }
.pestanas a[aria-selected="true"] { color: var(--c-primario); box-shadow: inset 0 -2px 0 var(--c-primario); }
[data-tema="original"] .pestanas a[aria-selected="true"] { color: #101325; font-weight: 600;
  box-shadow: inset 0 -2px 0 #2392D1; }

/* ── Botones (Button de antd) ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--a-alto); padding: 4px 15px; border-radius: var(--a-radio);
  font: 400 14px/1.5715 var(--f-texto); border: 1px solid var(--a-borde);
  background: #FFFFFF; color: var(--a-texto); cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .02);
  transition: color .2s, background-color .2s, border-color .2s;
}
.btn:hover { color: var(--c-primario-hover); border-color: var(--c-primario-hover); }
.btn:focus-visible { outline: 4px solid var(--c-foco); outline-offset: 1px; }
.btn-primario { background: var(--c-primario); border-color: var(--c-primario); color: #FFFFFF;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--c-primario) 12%, transparent); }
.btn-primario:hover { background: var(--c-primario-hover); border-color: var(--c-primario-hover); color: #FFFFFF; }
.btn-primario:active { background: var(--c-primario-activo); }

/* ── Etiquetas (Tag de antd) ─────────────────────────────────────────── */
.tag {
  display: inline-block; padding: 0 7px; font-size: 12px; line-height: 20px; white-space: nowrap;
  border: 1px solid var(--a-borde); border-radius: var(--a-radio-sm); background: #FAFAFA; color: var(--a-texto);
}
.tag-ok { background: var(--a-ok-fondo); border-color: var(--a-ok-borde); color: var(--a-ok-texto); }
.tag-aviso { background: var(--a-aviso-fondo); border-color: var(--a-aviso-borde); color: var(--a-aviso-texto); }
.tag-error { background: var(--a-error-fondo); border-color: var(--a-error-borde); color: var(--a-error-texto); }

/* ── Campos (Form, Input, Select de antd) ────────────────────────────── */
.campo { margin: 0 0 16px; min-width: 0; }
.campo label { display: block; padding: 0 0 8px; color: var(--a-texto); font-size: 14px; }
.campo label .req { color: var(--a-error); margin-right: 4px; }
.campo .ayuda { margin: 4px 0 0; font-size: 14px; color: var(--a-texto-desc); }
.entrada {
  width: 100%; box-sizing: border-box; height: var(--a-alto); padding: 4px 11px;
  font: 400 14px/1.5715 var(--f-texto); color: var(--a-texto); background: #FFFFFF;
  border: 1px solid var(--a-borde); border-radius: var(--a-radio);
  transition: border-color .2s, box-shadow .2s;
}
.entrada:hover { border-color: var(--c-primario-hover); }
.entrada:focus { outline: 0; border-color: var(--c-primario);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primario) 10%, transparent); }
select.entrada { appearance: none; padding-right: 30px;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23000' stroke-opacity='.25' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center; }
textarea.entrada { height: auto; min-height: 64px; resize: vertical; }

/* Formulario en rejilla: dos columnas cuando hay sitio */
.rejilla { display: grid; grid-template-columns: 1fr; column-gap: 24px; }
.rejilla > .completo { grid-column: 1 / -1; }
@container vp (min-width: 900px) { .rejilla { grid-template-columns: 1fr 1fr; } }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 8px; }

/* ── Alertas (Alert de antd) ─────────────────────────────────────────── */
.alerta {
  display: flex; gap: 12px; align-items: flex-start; padding: 8px 12px; margin: 0 0 16px;
  border: 1px solid; border-radius: var(--a-radio-lg); font-size: 14px; color: var(--a-texto);
}
.alerta .ico { flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%;
  display: grid; place-items: center; color: #FFFFFF; font: 700 11px/1 var(--f-sistema); }
.alerta p { margin: 0; }
.alerta.con-descripcion { padding: 20px 24px; }
.alerta.con-descripcion .ico { width: 24px; height: 24px; font-size: 15px; margin-top: 0; }
.alerta .titulo { font-size: 16px; margin: 0 0 4px; }
.alerta-info { background: var(--c-info-suave); border-color: var(--c-info-borde); }
.alerta-info .ico { background: var(--c-info); }
.alerta-aviso { background: var(--a-aviso-fondo); border-color: var(--a-aviso-borde); }
.alerta-aviso .ico { background: var(--a-aviso); }
.alerta-error { background: var(--a-error-fondo); border-color: var(--a-error-borde); }
.alerta-error .ico { background: var(--a-error); }

/* ── Tabla (Table de antd) ───────────────────────────────────────────── */
.tabla-marco { overflow-x: auto; border: 1px solid var(--a-borde-sec); border-radius: var(--a-radio-lg); }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--c-superficie); }
.tabla th { text-align: left; font-weight: 600; color: var(--a-texto); background: #FAFAFA;
  padding: 12px 16px; border-bottom: 1px solid var(--a-borde-sec); white-space: nowrap; }
.tabla td { padding: 12px 16px; border-bottom: 1px solid var(--a-borde-sec); color: var(--a-texto); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: #FAFAFA; }
@container vp (max-width: 520px) { .tabla th, .tabla td { padding: 10px 8px; } }

/* ═══ Tema original: se recupera el aspecto actual del source ══════════ */
[data-tema="original"] .btn { border-radius: 2px; border: 2px solid #101325; background: transparent;
  color: #101325; font-weight: 600; box-shadow: none; }
[data-tema="original"] .btn:hover { color: #101325; border-color: #101325; background: #F2F2F2; }
[data-tema="original"] .btn-primario { background: #101325; color: #FFFFFF; }
[data-tema="original"] .btn-primario:hover { background: #374852; border-color: #374852; color: #FFFFFF; }
[data-tema="original"] .btn:focus-visible { outline: 3px solid #2392D1; outline-offset: 2px; }
[data-tema="original"] .tag { border-radius: 0; font-weight: 600; }
[data-tema="original"] .tag-ok { background: var(--v-ok); border-color: var(--v-ok); color: #FFFFFF; }
[data-tema="original"] .tag-aviso { background: #FFF7E6; border-color: #FFC000; color: #5C4300; }
[data-tema="original"] .entrada { border-radius: 0; border-color: #E2E4E8; }
[data-tema="original"] .entrada:focus { border-color: #2392D1; box-shadow: none; outline: 2px solid #2392D1; }
[data-tema="original"] .alerta { border-radius: 0; border-width: 0 0 0 5px; background: #F2F2F2;
  color: #374852; padding: 14px 16px; }
[data-tema="original"] .alerta .ico { display: none; }
[data-tema="original"] .alerta-info { border-color: #2392D1; }
[data-tema="original"] .alerta-aviso { background: #FFF7E6; border-color: #FFC000; color: #5C4300; }
[data-tema="original"] .alerta-error { background: var(--v-no-fondo); border: 1px solid var(--v-no);
  border-left-width: 5px; color: #101325; }
[data-tema="original"] .tabla-marco { border-radius: 0; border: 0; }
[data-tema="original"] .tabla th { background: transparent; color: #8E9098; font-weight: 400;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid #374852; }
[data-tema="original"] .tabla td { border-bottom-color: #E2E4E8; color: #101325; }
[data-tema="original"] .tabla tbody tr:hover td { background: transparent; }