/* Tripuly — puente de mando. Herramienta de trabajo: clara y densa, con los colores de la marca. */

.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--mar-900); color: var(--espuma); border-bottom: 3px solid var(--marco); }
.barra .marca { color: var(--laton-claro); }
.logo { display: inline-flex; }
.logo svg { width: 28px; height: 28px; }
.titulo-barra { margin-right: auto; color: #c9b48a; font-weight: 700; }

.contenido { width: min(1280px, 100% - 32px); margin: 20px auto 60px; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; margin-bottom: 12px; }
.nota { color: var(--texto-suave); margin: 0 0 14px; }

.entrada { max-width: 420px; margin: 40px auto; padding: 28px; }
.entrada p { color: var(--texto-suave); margin: 6px 0 18px; }
.entrada form { display: grid; gap: 14px; }
.estado-form { min-height: 1.3em; margin: 0; color: var(--peligro); font-weight: 700; }

.pestanas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; }
.pestanas button { border: 2px solid var(--marco); background: var(--superficie); padding: .45em .95em; border-radius: 7px; cursor: pointer; font-weight: 800; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.pestanas button[aria-current="page"] { background: var(--mar-900); color: var(--laton-claro); border-color: var(--mar-900); }
.cuenta { font-size: .75rem; background: var(--fondo-2); color: var(--texto); padding: 0 .45em; border-radius: 4px; }
.cuenta:empty { display: none; }

.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 980px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi { padding: 14px 16px; }
.kpi span { font-size: .82rem; color: var(--texto-suave); font-weight: 700; }
.kpi b { display: block; font-size: 1.7rem; font-weight: 900; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .dos-col { grid-template-columns: 1fr; } }
.bloque { padding: 18px 20px; }
.linea { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.linea:last-child { border-bottom: 0; }
.linea div { flex: 1; min-width: 0; }
.linea b { display: block; }
.linea span.sec { font-size: .85rem; color: var(--texto-suave); }
.vacio { color: var(--texto-suave); padding: 10px 0; margin: 0; }

.herramientas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.herramientas input[type="search"] { flex: 1; min-width: 200px; }
input, select, textarea { padding: .55em .75em; border-radius: 7px; border: 2px solid var(--borde); background: var(--superficie); color: var(--texto); width: 100%; }
.herramientas select, .herramientas input { width: auto; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); }

.tabla-envoltorio { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabla th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); padding: 10px 12px; border-bottom: 2px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr.clicable { cursor: pointer; }
.tabla tbody tr.clicable:hover { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.tabla td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .principal b { display: block; }
.tabla .principal span { font-size: .82rem; color: var(--texto-suave); }
.tabla select, .tabla input { min-width: 130px; padding: .35em .5em; font-size: .9rem; }
.caritas { display: flex; gap: 2px; }
.caritas .avatar { --tam: 26px; border-width: 1px; border-radius: 5px; }
.fila-vacia td { text-align: center; color: var(--texto-suave); padding: 26px; }

.planes-edicion { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }
.plan-edicion { padding: 16px; display: grid; gap: 10px; }
.plan-edicion .cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.formulario { display: grid; gap: 12px; }
.formulario label { display: grid; gap: 5px; font-weight: 700; font-size: .9rem; }
.formulario label.casilla { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.formulario label.casilla input { width: auto; }
#form-ajustes { max-width: 640px; }
#form-ajustes h2:not(:first-child) { margin-top: 10px; }

.dialogo { width: min(760px, 100% - 24px); max-height: calc(100dvh - 40px); border: 3px solid var(--marco); border-radius: 12px; padding: 22px; background: var(--superficie); color: var(--texto); box-shadow: 0 6px 0 var(--marco-oscuro); }
.dialogo::backdrop { background: rgb(18 12 24 / .6); }
.rejilla-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rejilla-form .ancho-2 { grid-column: 1 / -1; }
@media (max-width: 600px) { .rejilla-form { grid-template-columns: 1fr; } }
.tripulantes-form { border: 2px solid var(--borde); border-radius: 8px; padding: 10px 12px; }
.tripulantes-form legend { font-weight: 700; font-size: .9rem; padding: 0 6px; }
#checks-tripulantes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 600px) { #checks-tripulantes { grid-template-columns: repeat(2, 1fr); } }
#checks-tripulantes label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
#checks-tripulantes input { width: auto; }
#checks-tripulantes .avatar { --tam: 30px; border-width: 1px; }
.pie-dialogo { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.pie-dialogo .hueco { flex: 1; }

.aviso-flotante { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50; background: var(--mar-900); color: var(--espuma); padding: 11px 18px; border-radius: 8px; border: 2px solid var(--laton); font-weight: 700; max-width: calc(100% - 32px); }
.aviso-flotante.error { border-color: var(--peligro); }