:root {
  --fondo: #e9edf3; --panel: #ffffff; --texto: #1f2937; --suave: #6b7280; --borde: #e3e7ee; --fila: #f6f8fb;
  --lateral: #2e3a55; --lateral-activo: #435173; --amarillo: #fcc419; --amarillo-osc: #e6b000;
  --ok: #16a34a; --mal: #dc2626; --aviso: #d97706; --azul: #2563eb;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sombra: 0 4px 24px rgba(47, 56, 75, .12);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ── Estructura ───────────────────────────── */
.app { display: flex; min-height: 100vh; }
.lateral { width: 64px; background: var(--lateral); display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 6px; flex-shrink: 0; }
.lateral .logo { color: var(--amarillo); font-weight: 700; font-size: 18px; margin-bottom: 18px; }
.lateral button { width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: #c9d2e6; cursor: pointer; display: grid; place-items: center; }
.lateral button:hover, .lateral button.activo { background: var(--lateral-activo); color: #fff; }
.lateral .abajo { margin-top: auto; }
.lateral svg { width: 20px; height: 20px; }
.contenido { flex: 1; min-width: 0; padding: 20px 28px 40px; }
.encabezado { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.encabezado h1 { font-size: 20px; margin: 0; }
.encabezado .quien { color: var(--suave); font-size: 13px; display: flex; gap: 10px; align-items: center; }
.vista { display: none; }
.vista.activa { display: block; }

/* ── Barra de herramientas ───────────────── */
.herramientas { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--suave); }
.campo input.linea { border: 0; border-bottom: 1px solid #b8c0cf; background: transparent; padding: 6px 2px; min-width: 260px; outline: none; }
.campo input.linea:focus { border-color: var(--lateral); }
.herramientas .derecha { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.boton { border: 1px solid var(--borde); background: var(--panel); border-radius: 8px; padding: 8px 16px; cursor: pointer; font-weight: 500; }
.boton:hover { border-color: #c6cddb; }
.boton.primario { background: var(--amarillo); border-color: var(--amarillo); }
.boton.primario:hover { background: var(--amarillo-osc); }
.boton.peligro { background: var(--mal); border-color: var(--mal); color: #fff; }
.boton.chico { padding: 4px 10px; font-size: 12px; }
.boton:disabled { opacity: .5; cursor: default; }
.icono-btn { border: 0; background: none; cursor: pointer; padding: 4px; border-radius: 6px; color: var(--lateral); display: inline-grid; place-items: center; }
.icono-btn:hover { background: var(--fila); }
.icono-btn svg { width: 18px; height: 18px; }

/* ── Tabla principal ─────────────────────── */
.tarjeta { background: var(--panel); border-radius: 14px; box-shadow: var(--sombra); overflow: hidden; }
.tabla { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { text-align: left; color: var(--suave); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  padding: 14px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; cursor: pointer; user-select: none; }
th .flecha { opacity: 0; margin-left: 4px; }
th:hover .flecha, th.ordenada .flecha { opacity: 1; }
th.sin-orden { cursor: default; }
td { padding: 12px 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; white-space: nowrap; }
tr.equipo:hover > td { background: #fafbfd; }
tr.eliminado td { color: #9aa3b5; }
td.mono, .mono { font-family: var(--mono); font-size: 12px; }
.expandir { transition: transform .15s; }
tr.abierto .expandir { transform: rotate(180deg); }
.fallos { color: var(--texto); font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.fallos svg { width: 14px; height: 14px; color: var(--texto); }
.burbuja { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; background: #4b5878; color: #fff; font-weight: 600; font-size: 12px; padding: 0 6px; }
.vinculos { display: flex; gap: 10px; }
.vinculo { display: flex; flex-direction: column; align-items: center; font-size: 10px; color: var(--suave); }
.vinculo svg { width: 16px; height: 16px; }
.vinculo.ok svg { color: var(--ok); } .vinculo.mal svg { color: var(--mal); } .vinculo.gris svg { color: #b9c0cc; }
.acciones { display: flex; gap: 2px; align-items: center; }
.estado { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--fila); color: var(--suave); }
.estado.ok { background: #dcfce7; color: var(--ok); } .estado.mal { background: #fee2e2; color: var(--mal); } .estado.aviso { background: #fef3c7; color: var(--aviso); }

/* Particiones dentro del equipo */
tr.detalle > td { background: var(--fila); padding: 0 10px 12px 46px; }
.subtabla { background: var(--panel); border-radius: 10px; margin-top: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.subtabla th { cursor: default; font-size: 10px; padding: 10px; }
.subtabla td { padding: 9px 10px; }
.vacio { text-align: center; color: var(--suave); padding: 28px; }

/* ── Menú contextual ─────────────────────── */
.menu { position: fixed; background: var(--panel); border-radius: 10px; box-shadow: var(--sombra); padding: 6px; z-index: 50; min-width: 200px; border: 1px solid var(--borde); }
.menu button { display: flex; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; gap: 8px; align-items: center; }
.menu button:hover { background: var(--fila); }
.menu button.peligro { color: var(--mal); }
.menu hr { border: 0; border-top: 1px solid var(--borde); margin: 4px 0; }

/* ── Modales ─────────────────────────────── */
.fondo-modal { position: fixed; inset: 0; background: rgba(46, 58, 85, .45); display: grid; place-items: center; z-index: 40; padding: 20px; }
.modal { background: var(--panel); border-radius: 16px; width: min(880px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; box-shadow: var(--sombra); }
.modal.angosto { width: min(520px, 100%); }
.modal.ancho { width: min(1100px, 100%); }
.modal header { padding: 22px 26px 6px; display: flex; justify-content: space-between; align-items: flex-start; }
.modal header h2 { margin: 0; font-size: 19px; }
.modal header p { margin: 4px 0 0; color: var(--suave); font-size: 13px; }
.modal .cuerpo { padding: 12px 26px; overflow-y: auto; }
.modal footer { padding: 14px 26px 22px; display: flex; gap: 10px; align-items: center; }
.modal footer .separador { flex: 1; }
.seccion { margin: 14px 0 6px; font-weight: 600; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.seccion .info { color: var(--suave); font-weight: 400; font-size: 12px; }
.grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px; }
.grilla.tres { grid-template-columns: repeat(3, 1fr); }
.grilla .todo { grid-column: 1 / -1; }
.form label { display: block; font-size: 12px; color: var(--suave); }
.form label > input, .form label > select, .form label > textarea, .form label > button { display: block; width: 100%; margin-top: 4px; }
.form label > .chip { margin-top: 4px; }
.form label .req { color: var(--mal); }
.form input, .form select, .form textarea { border: 1px solid var(--borde); border-radius: 8px; padding: 9px 10px; background: #fff; outline: none; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--lateral); }
.form textarea { min-height: 70px; resize: vertical; }
.form .error-campo { border-color: var(--mal) !important; }
.form label.casilla { display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--texto); font-size: 13px; }
.form label.casilla > input { width: auto; margin: 0; }
.lista-usuarios { border: 1px solid var(--borde); border-radius: 10px; max-height: 220px; overflow-y: auto; }
.lista-usuarios table th { position: sticky; top: 0; background: var(--fila); cursor: default; }
.campana { cursor: pointer; color: #b9c0cc; border: 0; background: none; }
.campana.on { color: var(--lateral); }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin: 4px 0 14px; }
.pestanas button { border: 0; background: none; padding: 10px 14px; cursor: pointer; color: var(--suave); border-bottom: 2px solid transparent; font-weight: 500; }
.pestanas button.activa { color: var(--texto); border-color: var(--amarillo); }
.acordeon { border: 1px solid var(--borde); border-radius: 10px; margin: 8px 0; }
.acordeon summary { padding: 12px 14px; cursor: pointer; font-weight: 600; }
.acordeon .adentro { padding: 0 14px 12px; }
.datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; margin: 8px 0 12px; }
.datos div span { display: block; font-size: 12px; color: var(--suave); }
.chip { display: inline-flex; gap: 6px; align-items: center; background: var(--fila); border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.resumen { display: flex; gap: 10px; margin: 6px 0 4px; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcion { border: 1px solid var(--borde); border-radius: 10px; padding: 12px; cursor: pointer; display: flex; gap: 10px; }
.opcion.elegida { border-color: var(--lateral); background: #f3f5fa; }
.opcion small { color: var(--suave); display: block; }
.ia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ia label { border: 1px solid var(--borde); border-radius: 10px; padding: 10px; }

/* ── Avisos ──────────────────────────────── */
.avisos { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.aviso { background: var(--lateral); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: var(--sombra); max-width: 420px; display: flex; gap: 10px; align-items: center; animation: entra .2s ease-out; }
.aviso.ok { background: #14532d; } .aviso.mal { background: #7f1d1d; }
@keyframes entra { from { transform: translateY(10px); opacity: 0; } }
.cargando { color: var(--suave); padding: 24px; text-align: center; }

/* ── Login ───────────────────────────────── */
.tarjeta-login { max-width: 380px; margin: 14vh auto; background: var(--panel); border-radius: 16px; padding: 30px; text-align: center; box-shadow: var(--sombra); }
.tarjeta-login h1 { margin: 0; font-size: 22px; }
.tarjeta-login h1 small { color: var(--suave); font-weight: 400; font-size: 14px; }
.nota { color: var(--suave); font-size: 13px; }
.error { color: var(--mal); }
.boton-google { display: inline-flex; gap: 10px; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 8px;
  border: 1px solid var(--borde); background: #fff; color: var(--texto); text-decoration: none; font-weight: 500; margin-top: 14px; }

@media (max-width: 760px) {
  .contenido { padding: 14px; }
  .grilla, .grilla.tres, .datos, .opciones, .ia { grid-template-columns: 1fr; }
  .campo input.linea { min-width: 160px; }
}