/* Panel Junior On Demand · Torpedo Servicios SpA */
:root{
  --tinta:#1d1d1f; --tinta-2:#4a4a4f; --tenue:#77777c; --linea:#e3e1dc; --fondo:#f6f5f2; --tarjeta:#fff;
  --naranja:#ff9900; --naranja-osc:#d97a00; --naranja-claro:#fff4e2;
  --ok:#17663a; --ok-fondo:#e7f5ec; --error:#b42318; --error-fondo:#fdecea; --info:#1f4b99; --info-fondo:#eaf1fd;
  --radio:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--tinta);background:var(--fondo)}
a{color:#a35400}
a:hover{color:var(--naranja-osc)}
h1{font-size:24px;line-height:1.25;margin:0 0 16px;letter-spacing:-.01em}
h2{font-size:17px;margin:20px 0 10px}
h2:first-child,.encabezado--chico h2{margin-top:0}
h3{font-size:14px;margin:18px 0 6px;color:var(--tinta-2)}
p{margin:0 0 10px}
small,.pequeno{font-size:13px}
.tenue{color:var(--tenue)}
.nowrap{white-space:nowrap}
.texto{white-space:normal;overflow-wrap:anywhere}

/* barra */
.barra{display:flex;align-items:center;gap:20px;padding:8px 24px;background:#fff;border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.marca img{display:block;height:40px;width:auto}
.nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.nav a{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--tinta-2);font-weight:500}
.nav a:hover{background:var(--fondo);color:var(--tinta)}
.nav a[aria-current]{background:var(--naranja-claro);color:var(--tinta)}
.cuenta{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:var(--naranja);color:#1d1d1f;font-size:12px;font-weight:700;text-align:center;line-height:20px}
.menu{position:relative}
.menu summary{cursor:pointer;list-style:none;padding:8px 12px;border-radius:8px;color:var(--tinta-2)}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:" ▾";font-size:11px}
.menu[open] summary{background:var(--fondo)}
.menu__panel{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--linea);border-radius:var(--radio);box-shadow:0 10px 30px -12px rgba(0,0,0,.25);padding:12px;min-width:230px;display:flex;flex-direction:column;gap:6px}
.menu__panel a,.menu__panel .enlace{padding:4px 2px;text-align:left}

/* página */
.principal{max-width:1180px;margin:0 auto;padding:24px}
.principal--angosto{max-width:440px;padding-top:8vh}
.encabezado{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.encabezado h1{margin:0}
.miga{font-size:13px;margin-bottom:6px}
.miga a{text-decoration:none}
.tarjeta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--radio);padding:20px;margin-bottom:16px}
.columnas{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.columnas>.tarjeta{margin-bottom:0}
.columnas+.columnas{margin-top:16px}
.bloque{margin-bottom:22px}
.bloque h2{display:flex;align-items:center;gap:8px}
.bloque--atencion h2{color:#8a4b00}
.bloque--alerta h2{color:var(--error)}

/* acceso */
.acceso{text-align:left}
.acceso__logo{display:block;margin:0 auto 12px;height:64px;width:auto}
.acceso h1{text-align:center;font-size:20px}

/* avisos */
.aviso{padding:10px 14px;border-radius:8px;margin:0 0 16px;border:1px solid transparent}
.aviso--ok{background:var(--ok-fondo);color:var(--ok);border-color:#bfe3cc}
.aviso--error{background:var(--error-fondo);color:var(--error);border-color:#f5c2bd}
.aviso--info{background:var(--info-fondo);color:var(--info);border-color:#c8d9f7}
.aviso--atencion{background:var(--naranja-claro);color:#7a4300;border-color:#ffd699}

/* formularios */
label{display:flex;flex-direction:column;gap:4px;font-weight:500;font-size:14px;color:var(--tinta-2)}
label small{font-weight:400}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],input[type=number],input[type=search],input[type=month],select,textarea{
  font:inherit;font-size:15px;color:var(--tinta);background:#fff;border:1px solid #cfccc5;border-radius:8px;padding:8px 10px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--naranja);box-shadow:0 0 0 3px rgba(255,153,0,.2)}
input.falta{border-color:var(--naranja);background:var(--naranja-claro)}
textarea{resize:vertical}
fieldset{border:1px solid var(--linea);border-radius:var(--radio);padding:12px 14px;margin:0;display:flex;flex-direction:column;gap:10px}
legend{font-weight:600;font-size:14px;padding:0 6px}
.formulario{display:flex;flex-direction:column;gap:14px;max-width:820px}
.pila{display:flex;flex-direction:column;gap:12px}
.fila{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.fila>label{flex:0 1 auto}
.fila--2>label{flex:1 1 260px}
.fila--3>label{flex:1 1 200px}
.check{flex-direction:row;align-items:center;gap:8px;font-weight:400}
.opcion{flex-direction:row;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--linea);border-radius:8px;font-weight:400;cursor:pointer}
.opcion:has(input:checked){border-color:var(--naranja);background:var(--naranja-claro)}
.opcion input{margin-top:3px}
.opcion--compacta{padding:6px 10px}
.opcion[hidden]{display:none}
.dias{display:flex;gap:14px;flex-wrap:wrap}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.en-linea{display:inline-flex;gap:8px;align-items:center;margin:0}
.en-linea select{width:auto;padding:4px 8px;font-size:13px}
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.filtros label{font-size:13px}
.filtros input,.filtros select{padding:6px 8px;font-size:14px}

/* botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:600;font-size:14px;padding:9px 16px;border-radius:8px;border:1px solid #cfccc5;background:#fff;color:var(--tinta);text-decoration:none;cursor:pointer;white-space:nowrap}
.boton:hover{border-color:#a9a59c;color:var(--tinta)}
.boton--primario{background:var(--naranja);border-color:var(--naranja);color:#1d1d1f}
.boton--primario:hover{background:#ffad33;border-color:#ffad33}
.boton--peligro{background:#fff;border-color:#e8a29b;color:var(--error)}
.boton--peligro:hover{background:var(--error-fondo);color:var(--error)}
.boton--chico{padding:5px 10px;font-size:13px}
.enlace{background:none;border:0;padding:0;font:inherit;color:#a35400;text-decoration:underline;cursor:pointer}

/* tablas */
.tabla-envoltura{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;background:#fff}
.tabla th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--tenue);font-weight:600;text-align:left;padding:8px 10px;border-bottom:2px solid var(--linea)}
.tabla td{padding:9px 10px;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla tfoot td{border-bottom:0;padding-top:6px;padding-bottom:6px}
.tabla .num{text-align:right}
.tabla--compacta td{padding:7px 8px}
.tabla input[type=text],.tabla input[type=number]{padding:5px 8px;font-size:14px}
.tabla input+input{margin-top:4px}
.tabla input[type=number]{width:72px}
.tabla tr.nueva td{background:#fbfaf8}
.inactiva{opacity:.55}

/* estados */
.estado{display:inline-block;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:600;vertical-align:middle;white-space:nowrap;border:1px solid transparent}
.estado--solicitado{background:var(--naranja-claro);color:#8a4b00;border-color:#ffd699}
.estado--requiere_cambios{background:#fff7d6;color:#7a5d00;border-color:#f0dc8c}
.estado--confirmado{background:var(--info-fondo);color:var(--info);border-color:#c8d9f7}
.estado--en_curso{background:#efe9fd;color:#5b3aa8;border-color:#d8cbf6}
.estado--realizado{background:var(--ok-fondo);color:var(--ok);border-color:#bfe3cc}
.estado--cancelado,.estado--rechazado{background:#f0efed;color:#6b6b70;border-color:#dddad4}
.etiqueta{display:inline-block;padding:0 7px;border-radius:6px;background:#f0efed;color:var(--tinta-2);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;vertical-align:middle}

/* ficha */
.datos{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;margin:0}
.datos dt{color:var(--tenue);font-size:13px;padding-top:1px}
.datos dd{margin:0;overflow-wrap:anywhere}
.accion{border-top:1px solid var(--linea);padding:12px 0 4px;margin:0}
.accion:first-of-type{border-top:0;padding-top:0}
details.accion summary{cursor:pointer;font-weight:600;color:#a35400;padding:2px 0}
details.accion[open] summary{margin-bottom:10px}
.historial{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.historial li{border-left:3px solid var(--linea);padding:2px 0 2px 12px}
.historial li.comentario{border-left-color:var(--naranja)}
.historial li.interno{border-left-color:#8f8a7e;background:#faf9f6}
.historial .texto{margin-top:2px}
.lista-simple{margin:0;padding-left:18px}
.lista-simple li{margin:3px 0}
.plan{border:1px solid var(--linea);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.plan p{margin:0 0 4px}
.plan--inactivo{opacity:.6}
.pasos{margin:8px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:14px}
.pasos li{padding-left:4px}
.pasos li.hecho::marker{color:var(--ok)}
.pasos li.hecho>b{color:var(--ok)}
.pasos li.actual>b{color:#8a4b00}
.pasos li:not(.hecho):not(.actual){color:var(--tenue)}
.pasos form{margin-top:6px}

@media (max-width:860px){
  .columnas{grid-template-columns:1fr}
  .principal{padding:16px}
  .barra{padding:8px 14px;gap:6px 10px}
  .marca img{height:34px}
  .nav{order:3;flex-basis:100%;gap:2px;overflow-x:auto;flex-wrap:nowrap}
  .nav a{padding:6px 10px;white-space:nowrap;font-size:14px}
  .menu{margin-left:auto}
  .datos{grid-template-columns:1fr}
  .datos dt{padding-top:6px}
}