/* OFICINA-IA-PANTALLA-v1 — estilo de la pantalla Oficina IA.
   Usa solo variables del anfitrión (app.css) con respaldo en rgb(); no hay colores hexadecimales aquí:
   los colores propios de las mascotas viven en oficina-ia-mascotas.js. Todo bajo el prefijo .oia-. */

.oia-raiz {
  --oia-azul: var(--azul, rgb(26, 60, 143));
  --oia-azul-osc: var(--azul-dark, rgb(15, 37, 96));
  --oia-azul-bg: var(--azul-bg, rgb(237, 241, 249));
  --oia-verde: var(--verde-dark, rgb(22, 163, 74));
  --oia-rojo: var(--rojo, rgb(239, 68, 68));
  --oia-rojo-bg: var(--rojo-light, rgb(254, 226, 226));
  --oia-naranja: var(--naranja, rgb(245, 158, 11));
  --oia-naranja-bg: var(--naranja-light, rgb(254, 243, 199));
  --oia-gris: var(--gris, rgb(100, 116, 139));
  --oia-gris-bg: var(--gris-light, rgb(241, 245, 249));
  --oia-blanco: var(--blanco, rgb(255, 255, 255));
  --oia-texto: var(--texto, rgb(30, 41, 59));
  --oia-borde: var(--borde, rgb(226, 232, 240));
  --oia-radio: var(--radio, 10px);
  --oia-sombra: var(--sombra-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--oia-texto);
  font-family: inherit;
  padding: 4px 0 24px;
}

/* ── cabecera y avisos ── */
.oia-cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--oia-azul);
  color: var(--oia-blanco);
  border-radius: var(--oia-radio);
  padding: 16px 18px;
}

.oia-cab h2 {
  margin: 0;
  font-size: 18px;
}

.oia-cab p {
  margin: 4px 0 0;
  font-size: 12.5px;
  opacity: 0.9;
}

.oia-avisos {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.oia-aviso {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--oia-radio);
  border: 1px solid var(--oia-borde);
  background: var(--oia-azul-bg);
  font-size: 13px;
}

.oia-aviso-error {
  background: var(--oia-rojo-bg);
  border-color: var(--oia-rojo);
}

.oia-aviso-aviso {
  background: var(--oia-naranja-bg);
  border-color: var(--oia-naranja);
}

.oia-aviso-ok {
  border-color: var(--oia-verde);
}

/* ── botones, interruptores y campos ── */
.oia-btn {
  border: 1px solid var(--oia-azul);
  background: var(--oia-azul);
  color: var(--oia-blanco);
  border-radius: var(--oia-radio);
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.oia-btn-sec {
  background: var(--oia-blanco);
  color: var(--oia-azul);
}

.oia-btn-mini {
  padding: 3px 9px;
  font-size: 12px;
  background: var(--oia-blanco);
  color: var(--oia-azul);
}

.oia-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.oia-btn:focus-visible,
.oia-tab:focus-visible,
.oia-tarjeta:focus-visible,
.oia-pleg-btn:focus-visible,
.oia-switch:focus-visible,
.oia-input:focus-visible,
.oia-enlace:focus-visible,
.oia-panel:focus-visible,
.oia-detalle:focus-visible {
  outline: 3px solid var(--oia-naranja);
  outline-offset: 2px;
}

.oia-switch {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 24px;
  border: 1px solid var(--oia-borde);
  background: var(--oia-gris);
  cursor: pointer;
  padding: 0;
  flex: none;
}

.oia-switch[aria-checked="true"] {
  background: var(--oia-verde);
}

.oia-switch-bola {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--oia-blanco);
  transition: left 0.15s;
}

.oia-switch[aria-checked="true"] .oia-switch-bola {
  left: 20px;
}

.oia-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}

.oia-campo label {
  font-size: 12.5px;
  font-weight: 700;
}

.oia-input {
  border: 1.5px solid var(--oia-borde);
  border-radius: var(--oia-radio);
  padding: 8px 10px;
  font: inherit;
  font-size: 13.5px;
  background: var(--oia-blanco);
  color: var(--oia-texto);
  max-width: 320px;
}

.oia-casilla {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 3px 0;
}

/* ── pestañas ── */
.oia-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--oia-borde);
}

.oia-tab {
  border: none;
  background: transparent;
  padding: 10px 16px;
  font: inherit;
  font-weight: 700;
  color: var(--oia-gris);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}

.oia-tab[aria-selected="true"] {
  color: var(--oia-azul);
  border-bottom-color: var(--oia-azul);
}

.oia-panel[hidden],
.oia-tab[hidden],
.oia-detalle[hidden],
.oia-campo[hidden],
.oia-casilla[hidden],
.oia-estructura[hidden],
.oia-rep-cuerpo[hidden],
.oia-puesto-cuerpo[hidden] {
  display: none;
}

/* ── Oficina: tarjetas de puestos ── */
.oia-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.oia-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--oia-blanco);
  border: 2px solid var(--oia-borde);
  border-radius: var(--oia-radio);
  box-shadow: var(--oia-sombra);
  padding: 14px;
  cursor: pointer;
}

.oia-tarjeta[aria-expanded="true"] {
  border-color: var(--oia-azul);
}

.oia-masc {
  width: 72px;
  height: 72px;
}

.oia-nombre {
  font-size: 16px;
  font-weight: 800;
  color: var(--oia-azul-osc);
}

.oia-verbo,
.oia-linea {
  font-size: 12.5px;
  color: var(--oia-gris);
}

.oia-tarea {
  font-size: 13px;
  font-weight: 600;
}

.oia-nota {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--oia-naranja);
  background: var(--oia-naranja-bg);
  border-radius: 6px;
  padding: 2px 8px;
}

/* ── estados: color + icono + texto ── */
.oia-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--oia-borde);
  background: var(--oia-gris-bg);
  color: var(--oia-texto);
}

.oia-chip-trabajando {
  background: var(--oia-azul-bg);
  border-color: var(--oia-azul);
  color: var(--oia-azul);
}

.oia-chip[hidden] {
  display: none;
}

.oia-chip-espera {
  background: var(--oia-naranja-bg);
  border-color: var(--oia-naranja);
}

.oia-chip-listo {
  border-color: var(--oia-verde);
  color: var(--oia-verde);
}

.oia-chip-apagado {
  border-style: dashed;
  color: var(--oia-gris);
}

.oia-chip-problema {
  background: var(--oia-rojo-bg);
  border-color: var(--oia-rojo);
}

.oia-est-apagado .oia-masc {
  filter: grayscale(0.7);
  opacity: 0.8;
}

.oia-est-problema {
  border-color: var(--oia-rojo);
}

/* ── animación: solo con estado trabajando ── */
@keyframes oia-rebote {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes oia-mover {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

@keyframes oia-parpadeo {
  0%, 92%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.1); }
}

.oia-est-trabajando .oia-masc-cuerpo {
  animation: oia-rebote 1s ease-in-out infinite;
}

.oia-est-trabajando .oia-masc-rasgo {
  animation: oia-mover 1.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.oia-est-trabajando .oia-masc-ojos {
  animation: oia-parpadeo 3s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .oia-masc-cuerpo,
  .oia-masc-rasgo,
  .oia-masc-ojos {
    animation: none !important;
  }

  .oia-switch-bola {
    transition: none;
  }
}

/* ── detalle y resultado ── */
.oia-detalle {
  background: var(--oia-blanco);
  border: 1px solid var(--oia-borde);
  border-radius: var(--oia-radio);
  padding: 16px;
  margin-top: 14px;
}

.oia-detalle-cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.oia-rep-lista {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oia-rep-fila {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid var(--oia-borde);
  border-radius: var(--oia-radio);
}

.oia-res,
.oia-lectura {
  margin-top: 10px;
}

.oia-lectura {
  background: var(--oia-azul-bg);
  border-radius: var(--oia-radio);
  padding: 10px 12px;
  font-size: 13px;
}

.oia-resumen {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  font-size: 13px;
}

.oia-resumen dt {
  font-weight: 700;
}

.oia-resumen dd {
  margin: 0;
}

.oia-advertencia {
  color: var(--oia-texto);
  background: var(--oia-naranja-bg);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12.5px;
  margin: 6px 0 0;
}

.oia-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── tablas, secciones y paginación ── */
.oia-scroll {
  overflow-x: auto;
}

.oia-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.oia-tabla th {
  background: var(--oia-azul);
  color: var(--oia-blanco);
  text-align: left;
  padding: 8px 10px;
  white-space: nowrap;
}

.oia-tabla td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--oia-borde);
  vertical-align: middle;
}

.oia-seccion {
  background: var(--oia-blanco);
  border: 1px solid var(--oia-borde);
  border-radius: var(--oia-radio);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.oia-seccion h3 {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--oia-azul-osc);
}

.oia-pag {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12.5px;
}

.oia-acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.oia-enlace {
  color: var(--oia-azul);
  font-weight: 700;
  font-size: 12.5px;
}

.oia-vacio {
  text-align: center;
  color: var(--oia-gris);
  padding: 18px 8px;
  font-size: 13px;
}

/* ── Reportes: árbol plegable ── */
.oia-pleg {
  border: 1px solid var(--oia-borde);
  border-radius: var(--oia-radio);
  background: var(--oia-blanco);
  margin-bottom: 10px;
}

.oia-pleg-cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
}

.oia-pleg-btn {
  flex: 1;
  text-align: left;
  background: transparent;
  border: none;
  font: inherit;
  font-weight: 800;
  color: var(--oia-azul-osc);
  padding: 8px 0;
  cursor: pointer;
}

.oia-pleg-btn[aria-expanded="true"]::before {
  content: "▾ ";
}

.oia-pleg-btn[aria-expanded="false"]::before {
  content: "▸ ";
}

.oia-sw-caja {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
}

.oia-rep-cuerpo,
.oia-puesto-cuerpo {
  padding: 4px 14px 14px;
}

.oia-estructura {
  background: var(--oia-gris-bg);
  border-radius: var(--oia-radio);
  padding: 10px 12px;
  margin-top: 10px;
}

.oia-dest {
  margin-top: 10px;
  border-top: 1px solid var(--oia-borde);
  padding-top: 8px;
}

.oia-alc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px 26px;
}

.oia-alc-estado {
  color: var(--oia-gris);
}

.oia-alc-hueco {
  flex: 1 1 100%;
}

.oia-alcance {
  border: 1px solid var(--oia-borde);
  border-radius: 8px;
  padding: 10px 12px;
}

.oia-alcance[hidden] {
  display: none;
}

.oia-alc-bloque {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.oia-alc-aviso {
  margin: 0 0 8px;
  font-weight: 600;
}

.oia-dest-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

.oia-dest-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--oia-borde);
  font-size: 13px;
}

.oia-guardar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  position: sticky;
  bottom: 0;
  background: var(--oia-gris-bg);
  padding: 10px 12px;
  border-radius: var(--oia-radio);
}

.oia-indicador {
  font-size: 12.5px;
  color: var(--oia-gris);
}

.oia-nota-dias,
.oia-nota-llaves,
.oia-politica {
  font-size: 12.5px;
  color: var(--oia-gris);
}

@media (max-width: 640px) {
  .oia-rejilla {
    grid-template-columns: 1fr;
  }

  .oia-input {
    max-width: none;
  }

  .oia-tab {
    flex: 1 1 auto;
    padding: 10px 8px;
  }
}

/* ── Reportes v2: encabezado, resumen, hora y destinatarios ── */
.oia-rep-raiz {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.oia-rep-raiz .oia-btn,
.oia-aviso .oia-btn {
  min-height: 40px;
}

.oia-rep-raiz .oia-input {
  min-height: 40px;
}

.oia-aviso span {
  flex: 1;
  overflow-wrap: anywhere;
}

.oia-ayuda {
  font-size: 12px;
  line-height: 1.35;
  color: var(--oia-gris);
}

.oia-rh {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--oia-radio);
  border: 1px solid var(--oia-borde);
  background: linear-gradient(135deg, var(--oia-azul-bg), var(--oia-blanco) 70%);
  box-shadow: var(--oia-sombra);
}

.oia-rh-masc {
  flex: none;
  width: 64px;
  height: 64px;
}

.oia-rh-masc .oia-masc,
.oia-rz-masc .oia-masc {
  width: 100%;
  height: 100%;
}

.oia-rh-texto {
  min-width: 0;
}

.oia-rh h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--oia-azul-osc);
}

.oia-rh p {
  margin: 0 0 8px;
  font-size: 13px;
}

.oia-rz-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 10px;
  margin-top: 8px;
}

.oia-rz-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--oia-borde);
  border-top: 3px solid var(--oia-azul);
  border-radius: var(--oia-radio);
  background: var(--oia-blanco);
  box-shadow: var(--oia-sombra);
}

.oia-rz-card-off {
  border-top-color: var(--oia-gris);
  background: var(--oia-gris-bg);
}

.oia-rz-cab {
  display: flex;
  align-items: center;
  gap: 8px;
}

.oia-rz-cab h4 {
  flex: 1;
  margin: 0;
  font-size: 14px;
  color: var(--oia-azul-osc);
}

.oia-rz-masc {
  flex: none;
  width: 34px;
  height: 34px;
}

.oia-rz-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oia-rz-rep,
.oia-rz-persona {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.oia-rz-meta,
.oia-rz-correo,
.oia-rz-vacio {
  font-size: 12.5px;
  color: var(--oia-gris);
}

.oia-rz-pend {
  font-size: 12px;
  color: var(--oia-texto);
  background: var(--oia-naranja-bg);
  border-radius: 6px;
  padding: 1px 6px;
}

.oia-rz-sub {
  font-size: 12px;
  color: var(--oia-azul-osc);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.oia-hora {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-radius: var(--oia-radio);
  border: 1px solid var(--oia-borde);
  background: var(--oia-blanco);
  box-shadow: var(--oia-sombra);
}

.oia-hora-reloj {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--oia-azul);
  color: var(--oia-blanco);
}

.oia-hora-icono {
  width: 30px;
  height: 30px;
}

.oia-hora-centro {
  flex: 1 1 200px;
  min-width: 0;
}

.oia-hora-grande {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--oia-azul-osc);
}

.oia-hora-frase {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--oia-gris);
}

.oia-hora-lado {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.oia-hora-lado .oia-campo {
  margin: 0;
}

.oia-hora-lado .oia-nota-dias {
  margin: 0;
}

.oia-dest-item {
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--oia-borde);
  border-radius: var(--oia-radio);
  background: var(--oia-blanco);
  box-shadow: var(--oia-sombra);
}

.oia-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--oia-azul-bg);
  color: var(--oia-azul-osc);
  border: 2px solid var(--oia-azul);
  font-size: 14px;
  font-weight: 800;
}

.oia-dest-datos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-wrap: anywhere;
}

.oia-dest-correo,
.oia-dest-tipo {
  font-size: 12.5px;
  color: var(--oia-gris);
}

.oia-dest-chips {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.oia-dest-acciones {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.oia-alta {
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed var(--oia-azul);
  border-radius: var(--oia-radio);
  background: var(--oia-azul-bg);
}

.oia-alta h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--oia-azul-osc);
}

.oia-alta-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0 14px;
  margin-bottom: 8px;
}

.oia-alta-rejilla .oia-input {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

.oia-alta .oia-campo[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .oia-rh {
    align-items: flex-start;
  }

  .oia-dest-item {
    flex-wrap: wrap;
  }

  .oia-dest-datos {
    flex-basis: calc(100% - 56px);
  }

  .oia-dest-acciones {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 54px;
  }

  .oia-hora-grande {
    font-size: 30px;
  }

  .oia-guardar {
    flex-wrap: wrap;
  }
}