/* Estética inspirada en las pantallas de Kairos24h */
:root {
  --barra: #7a9cbf;
  --barra-osc: #5f84aa;
  --azul: #3c8dbc;
  --azul-osc: #2a6f9b;
  --icono: #2a7fd4;
  --rojo: #d9534f;
  --verde: #5cb85c;
  --gris: #f0f0f0;
  --borde: #d6dde6;
  --texto: #333;
  --ambar-bg: #fff7e0;
  --ambar: #9a6b00;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: "Ubuntu", Arial, Helvetica, sans-serif; font-size: 13px; color: var(--texto); background: #e9edf1; }
button { font-family: inherit; }
.oculto { display: none !important; }

/* Barra superior de la demo */
#topbar { display: flex; align-items: center; gap: 12px; padding: 6px 16px; background: #2f4f6f; color: #fff; font-size: 12px; }
#topbar .marca { font-weight: 700; letter-spacing: .3px; }
#topbar .badge { padding: 2px 8px; border-radius: 10px; background: #4caf50; font-weight: 600; }
#topbar .badge.mock { background: #e0a800; color: #222; }
#topbar .esp { flex: 1; }
#topbar a { color: #cfe3f7; cursor: pointer; text-decoration: none; }

/* Ventana tipo Kairos */
.ventana { background: #fff; margin: 10px auto; max-width: 1400px; border: 1px solid #b9c7d6; box-shadow: 0 2px 10px rgba(0,0,0,.15); display: flex; flex-direction: column; min-height: calc(100vh - 54px); }
.ventana-titulo { background: var(--barra); color: #1e2d3d; font-size: 17px; padding: 7px 34px; position: relative; }
.ventana-titulo .cerrar { position: absolute; right: 14px; top: 6px; cursor: pointer; color: #1e2d3d; font-size: 18px; }
.ventana-cuerpo { flex: 1; padding: 0 18px 18px; overflow: auto; }
.ventana-pie { background: var(--gris); border-top: 1px solid #ddd; padding: 10px 18px; display: flex; gap: 8px; align-items: center; }
.ventana-pie .esp { flex: 1; }

/* Pestañas con iconos */
.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--azul); padding: 6px 2px 0; margin-bottom: 8px; flex-wrap: wrap; }
.tab { width: 94px; padding: 6px 2px 4px; text-align: center; color: #999; cursor: pointer; border-radius: 3px 3px 0 0; font-size: 12px; }
.tab i { display: block; font-size: 21px; color: var(--icono); margin-bottom: 4px; }
.tab.activa { background: #e4e4e4; }
.tab:hover { background: #f2f2f2; }

/* Secciones con cabecera azul */
.seccion { border: 1px solid var(--borde); margin: 10px 0 16px; border-radius: 2px; }
.seccion-cab { background: var(--barra); color: #1e2d3d; font-size: 16px; padding: 6px 16px; display: flex; align-items: center; gap: 8px; }
.seccion-cab.clic { cursor: pointer; }
.seccion-cab .flecha { margin-left: auto; font-size: 12px; }
.seccion-cuerpo { padding: 12px 16px; }

/* Botones */
.btn { border: 1px solid #adb9c6; background: #fff; padding: 5px 12px; border-radius: 3px; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { background: #f4f7fa; }
.btn-azul { background: var(--azul); color: #fff; border-color: var(--azul-osc); }
.btn-azul:hover { background: var(--azul-osc); }
.btn-rojo { background: var(--rojo); color: #fff; border-color: #b52b27; }
.btn-rojo:hover { background: #c9302c; }
.btn-verde { background: var(--verde); color: #fff; border-color: #449d44; }
.btn-verde:hover { background: #449d44; }
.btn-grande { font-size: 18px; padding: 14px 28px; border-radius: 6px; }
.btn-icono { width: 30px; height: 30px; justify-content: center; padding: 0; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.icono-accion { color: #7d8fa3; cursor: pointer; font-size: 17px; margin-left: 9px; }
.icono-accion:hover { color: var(--icono); }
.icono-accion.azul { color: var(--icono); }

/* Problemas conocidos */
.problemas { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.btn-mas-rojo { width: 110px; height: 27px; border: 1px solid #ccc; background: #fff; cursor: pointer; border-radius: 2px; }
.btn-mas-rojo i { color: #d00; font-size: 19px; }
.no-problema { width: 350px; height: 27px; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; letter-spacing: .3px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e3a3a1; background: #fdf0ef; color: #8a2b27; padding: 4px 10px; border-radius: 14px; font-size: 12px; }
.chip b { font-weight: 700; }
.chip i { cursor: pointer; color: #b55; }

/* Antecedentes */
.grid-ant { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 18px; }
.grid-ant label { display: block; font-weight: 700; margin-bottom: 3px; color: #445; }
.grid-ant textarea { width: 100%; min-height: 44px; border: 1px solid #ccd; padding: 5px; font-family: inherit; font-size: 13px; resize: vertical; }

/* Tablas */
.toolbar { display: flex; gap: 14px; padding: 10px 26px; }
table.tabla { width: 100%; border-collapse: collapse; }
table.tabla th { background: var(--barra); color: #fff; font-weight: 700; text-align: left; padding: 8px 10px; font-size: 13px; }
table.tabla td { padding: 6px 10px; border-bottom: 1px solid #edf0f3; vertical-align: middle; }
table.tabla tr.fila-ep > td { background: #fff; }
.td-acciones { text-align: right; white-space: nowrap; }
.vacio { padding: 10px 0; color: #555; }
.sub-panel { background: #efeef4; border: 1px solid #c9cdd6; padding: 10px 16px 14px; }
.sub-panel table.tabla th { background: var(--barra); }
.sub-panel table.tabla td { background: #fff; }
.sub-toolbar { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; }
.sub-toolbar .info { margin-left: auto; color: #555; }
.btn-mostrar i { color: var(--azul); }
.btn-nueva i { color: #fff; background: var(--verde); border-radius: 2px; padding: 2px; }
.informes-lista td { background: #f8fbff !important; }
.informes-lista .nombre i { color: var(--icono); margin-right: 6px; }
input.inp, select.inp { border: 1px solid #b9c3cf; padding: 5px 7px; font-size: 13px; font-family: inherit; border-radius: 2px; background: #fff; }
input.inp.ancho { width: 100%; }
.estado { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.estado.listo { background: #e3f4e3; color: #2d7a2d; }
.estado.procesando { background: #e3eefb; color: #2a6f9b; }
.estado.pendiente { background: #eee; color: #666; }
.estado.error { background: #fbe4e4; color: #a33; }
.tag-ia { font-size: 10px; background: #e8e0fb; color: #5a3fb0; padding: 1px 6px; border-radius: 8px; margin-left: 6px; font-weight: 700; }
.tag-edit { font-size: 10px; background: #fff0d6; color: #8a5a00; padding: 1px 6px; border-radius: 8px; margin-left: 6px; font-weight: 700; }

/* Capas superpuestas y modales */
.capa { position: fixed; inset: 0; background: rgba(40, 50, 60, .45); z-index: 50; display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 20px 10px; }
.capa > .ventana { width: 100%; margin: 0 auto; min-height: auto; }
.modal { background: #fff; border-radius: 4px; box-shadow: 0 6px 30px rgba(0,0,0,.3); width: 100%; max-width: 800px; margin-top: 12vh; padding: 16px 18px; }
.modal h2 { color: #a94442; margin: 2px 0 14px; font-size: 26px; font-weight: 700; font-family: Arial, sans-serif; }
.modal h2.azul { color: #2c4f73; }
.modal .acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.modal textarea { width: 100%; min-height: 140px; border: 1px solid #ccc; padding: 6px; font-family: inherit; font-size: 13px; }
.modal label { display: block; margin: 10px 0 4px; font-size: 14px; }
.btn-alta { background: #428bca; color: #fff; font-weight: 700; border: 0; padding: 6px 4px; font-size: 14px; text-transform: uppercase; }
.btn-continuar { background: var(--verde); color: #fff; font-weight: 700; border: 0; padding: 6px 4px; font-size: 14px; text-transform: uppercase; }
.opciones-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 4px; }
.opcion-modo { border: 2px solid var(--borde); border-radius: 8px; padding: 22px 12px; text-align: center; cursor: pointer; background: #fafcff; }
.opcion-modo:hover { border-color: var(--azul); background: #f0f6fc; }
.opcion-modo i { font-size: 38px; color: var(--icono); display: block; margin-bottom: 10px; }
.opcion-modo b { font-size: 16px; display: block; }
.opcion-modo span { color: #666; font-size: 12px; }

/* Pantalla de grabación */
.grab-centro { text-align: center; padding: 30px 10px 26px; }
.grab-paciente { color: #555; margin-bottom: 18px; }
.cronometro { font-size: 54px; font-weight: 300; letter-spacing: 2px; margin: 10px 0; font-variant-numeric: tabular-nums; }
.punto-rec { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #d00; margin-right: 8px; animation: parpadeo 1.2s infinite; vertical-align: middle; }
.punto-rec.pausa { background: #e0a800; animation: none; }
@keyframes parpadeo { 50% { opacity: .2; } }
.vumetro { width: 340px; max-width: 90%; height: 12px; background: #e6eaef; border-radius: 6px; margin: 12px auto; overflow: hidden; }
.vumetro div { height: 100%; width: 0; background: linear-gradient(90deg, #5cb85c, #e0a800 75%, #d9534f); transition: width .08s; }
.grab-botones { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.aviso { background: var(--ambar-bg); color: var(--ambar); border: 1px solid #f0d58a; border-radius: 4px; padding: 8px 12px; margin: 10px auto; max-width: 640px; text-align: left; }
.aviso.rojo { background: #fbe9e9; color: #8a2b27; border-color: #efb7b5; }
.subir-archivo { margin-top: 18px; color: #666; font-size: 12px; }
.subir-archivo label { color: var(--azul); cursor: pointer; text-decoration: underline; }
.pasos { max-width: 460px; margin: 20px auto; text-align: left; }
.paso { display: flex; gap: 12px; align-items: center; padding: 9px 0; color: #999; font-size: 15px; }
.paso i { width: 22px; text-align: center; }
.paso.activo { color: var(--azul-osc); font-weight: 700; }
.paso.hecho { color: #2d7a2d; }
.barra-progreso { width: 360px; max-width: 90%; height: 8px; background: #e6eaef; border-radius: 4px; margin: 10px auto; overflow: hidden; }
.barra-progreso div { height: 100%; width: 0; background: var(--azul); }

/* Pantalla de informes */
.inf-cabecera { display: grid; grid-template-columns: 2.2fr 1fr 0.8fr; gap: 40px; padding: 10px 14px 18px; }
.inf-cabecera label { display: block; font-size: 17px; color: #555; margin-bottom: 6px; }
.inf-cabecera input, .inf-cabecera select { width: 100%; }
.ia-sugerido { font-size: 11px; color: #5a3fb0; margin-top: 4px; }
.inf-tabs { display: flex; gap: 2px; border-bottom: 1px solid #ddd; margin: 4px 0 12px; align-items: flex-end; }
.inf-tab { padding: 10px 18px; cursor: pointer; border: 1px solid transparent; border-bottom: 0; color: #555; background: none; font-size: 13px; }
.inf-tab.activa { border-color: #ddd; background: #fff; margin-bottom: -1px; color: #222; font-weight: 700; }
.inf-tab i { margin-right: 6px; color: var(--icono); }
.inf-tabs .esp { flex: 1; }
.inf-tabs .deco { padding: 10px 14px; color: #555; font-size: 12px; }
.panel-ia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 12px; }
.panel-ia .caja { border: 1px solid var(--borde); border-radius: 4px; padding: 8px 12px; background: #fbfcfe; }
.panel-ia h4 { margin: 0 0 6px; font-size: 13px; color: #2c4f73; }
.panel-ia ul { margin: 0; padding-left: 18px; }
.panel-ia .caja.verificar { background: var(--ambar-bg); border-color: #f0d58a; }
.panel-ia .caja.verificar h4 { color: var(--ambar); }
.metricas { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: #456; padding: 6px 2px 10px; }
.metricas b { color: #223; }
.pie-informes { background: var(--gris); border-top: 1px solid #ddd; padding: 10px 18px; display: flex; align-items: center; gap: 12px; position: sticky; bottom: 0; z-index: 5; }
.pie-informes .ico { width: 36px; height: 36px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; background: #e6eaef; border: 1px solid #ccd5df; }
.pie-informes .ico.guardar { color: #2e9d3c; }
.pie-informes .ico.pdf { color: #2a6fb5; }
.pie-informes .ico.volver { color: #2c4f73; }
.pie-informes .esp { flex: 1; }
.traza { max-height: 220px; overflow: auto; font-size: 12px; }
.traza td { padding: 4px 8px !important; }

/* Login */
.login-fondo { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2f4f6f, #7a9cbf); }
.login-caja { background: #fff; width: 360px; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.3); overflow: hidden; }
.login-caja .cab { background: var(--barra); padding: 16px 20px; color: #1e2d3d; font-size: 18px; }
.login-caja .cab small { display: block; font-size: 12px; color: #2e4256; margin-top: 2px; }
.login-caja form { padding: 20px; }
.login-caja label { display: block; margin: 10px 0 4px; font-weight: 700; }
.login-caja input { width: 100%; padding: 8px; border: 1px solid #bbc; border-radius: 3px; font-size: 14px; }
.login-caja button { width: 100%; margin-top: 18px; padding: 10px; font-size: 15px; }
.login-error { color: #a33; margin-top: 10px; min-height: 18px; }

/* Avisos flotantes */
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #2f4f6f; color: #fff; padding: 10px 18px; border-radius: 4px; z-index: 100; box-shadow: 0 4px 14px rgba(0,0,0,.3); font-size: 14px; }
#toast.error { background: #a33; }

@media (max-width: 900px) {
  .inf-cabecera { grid-template-columns: 1fr; gap: 10px; }
  .panel-ia { grid-template-columns: 1fr; }
  .opciones-modo { grid-template-columns: 1fr; }
}