/* Palominoss — chasis compartido del portal.
   Depende de tokens.css, que se linkea antes. Sin build, sin bundler.

   Regla de oficio que manda sobre todo lo demas, heredada del portal hermano:
   las pantallas de trabajo (tablas, listas, formularios, plata) van en solido y
   legible; el color y la decoracion son para el marco. Se probo la version "de
   vidrio" con numeros en claro sobre color y se descarto: cuesta mucho mas
   escanear y sumar que negro sobre blanco. */

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--text);color:var(--ink);background:var(--apple-050);
     line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.15;margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:var(--display)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Cifras: toda columna de plata o metraje va tabular */
.num,.money,.sh-tbl{font-variant-numeric:tabular-nums}

/* ============================================================
   ARMAZON
   ============================================================ */
.sh-app{display:flex;min-height:100vh}
.sh-main{flex:1;min-width:0;display:flex;flex-direction:column}
.sh-body{flex:1;padding:28px;display:flex;flex-direction:column;gap:22px;min-height:0}

/* ------------------------------------------------------------
   BARRA LATERAL — 248px, verde manzana
   ------------------------------------------------------------ */
/* La barra va en manzana, no en verde oscuro: el oscuro queda para la tinta
   y los botones, que es donde da jerarquia. Se separa del fondo de pagina
   por un tono y por el filete de la derecha. */
.sh-sb{width:248px;flex:none;background:var(--apple);border-right:1px solid var(--line-strong);
       display:flex;flex-direction:column}
.sh-sb-cab{padding:22px 20px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line-strong)}
.sh-sb-cab b{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.035em;color:var(--brand)}
.sh-nav{padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.sh-nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-left:3px solid transparent;
          font-family:var(--text);font-size:14.5px;font-weight:500;color:#35513F;transition:.14s ease-out}
.sh-nav a:hover{background:#D0EDD8;color:var(--brand)}
.sh-nav a.on{background:var(--paper);border-left-color:var(--accent);color:var(--brand);font-weight:600}
/* Pantalla que todavía no existe: se ve, se entiende que viene, y no se puede
   tocar. Mismo alto y misma sangría que un ítem de verdad para que la lista no
   se desarme, pero sin hover ni cursor de mano. */
.sh-nav .pronto{display:flex;align-items:center;gap:11px;padding:11px 12px;
                border-left:3px solid transparent;font-family:var(--text);font-size:14.5px;
                font-weight:500;color:var(--muted);opacity:.7;cursor:default}
.sh-nav .pronto .c{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
                   text-transform:uppercase;color:var(--muted)}
.sh-nav svg{width:20px;height:20px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none;
            stroke-linecap:round;stroke-linejoin:round}
.sh-nav .c{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
.sh-nav a.on .c{color:var(--brand)}
.sh-nav .c.nuevo{color:var(--accent)}
.sh-sb-pie{margin-top:auto;padding:16px;border-top:1px solid var(--line-strong)}
.sh-yo{display:flex;align-items:center;gap:11px}
.sh-yo .av{width:32px;height:32px;flex:none;background:var(--brand);display:flex;align-items:center;
           justify-content:center;font-family:var(--display);font-weight:700;font-size:13px;color:var(--apple)}
.sh-yo .n{font-size:13px;font-weight:600;color:var(--brand);line-height:1.3}
.sh-yo .r{font-size:11.5px;color:var(--muted);line-height:1.3}
.sh-sb-pie .nota{margin-top:12px;font-family:var(--mono);font-size:10px;color:var(--muted)}
/* La salida. 44px como todo lo que se toca, y en tinta apagada: es una salida, no
   una acción del trabajo, y no compite con el menú de arriba. */
.sh-salir{margin-top:12px;width:100%;display:flex;align-items:center;gap:11px;min-height:var(--touch);
          padding:0 4px;background:none;border:0;cursor:pointer;font-family:var(--text);
          font-size:13px;color:var(--muted);text-align:left}
.sh-salir:hover{color:var(--brand)}
.sh-salir svg{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.8;fill:none;
              stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------
   ENCABEZADO — 68px
   ------------------------------------------------------------ */
.sh-top{height:68px;flex:none;background:var(--paper);border-bottom:1px solid var(--line);
        display:flex;align-items:center;gap:20px;padding:0 28px}
/* Sin esto el `hidden` que le pone shell.js cuando no hay ni buscador ni
   acciones no hace nada: `display:flex` le gana al `[hidden]` del navegador, y
   la franja blanca de 68px se queda igual. */
.sh-top[hidden]{display:none}
.sh-buscar{flex:1;max-width:380px;display:flex;align-items:center;gap:9px;
           border:1px solid var(--line);background:var(--paper);padding:9px 12px}
.sh-buscar svg{width:18px;height:18px;flex:none;stroke:var(--muted);stroke-width:1.7;fill:none;stroke-linecap:round}
.sh-buscar input{flex:1;border:0;outline:0;font-family:var(--text);font-size:14px;color:var(--ink);background:none}
.sh-buscar input::placeholder{color:var(--muted)}
.sh-acciones{margin-left:auto;display:flex;align-items:center;gap:14px}

/* ------------------------------------------------------------
   BOTONES — esquinas rectas, como el isotipo
   ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
     font-family:var(--display);font-size:14px;font-weight:600;border:2px solid transparent;
     padding:10px 16px;transition:.14s ease-out;text-decoration:none;min-height:var(--touch)}
/* El texto del boton primario va en verde oscuro, no blanco: el verde brillante
   es demasiado claro para que el blanco contraste. */
.btn-1{background:var(--accent);border-color:var(--accent);color:var(--brand);font-weight:700;padding:12px 18px}
.btn-1:hover{background:var(--accent-700);border-color:var(--accent-700)}
.btn-2{border-color:var(--brand);color:var(--brand);background:var(--paper)}
.btn-2:hover{background:var(--apple)}
.btn-3{border-color:var(--line);color:var(--ink);background:var(--paper);font-weight:500}
.btn-3:hover{border-color:var(--line-strong)}
.btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Guardando. El boton se apaga MIENTRAS viaja el POST y esto es lo que se ve.
   No es decoracion: ningun POST del portal tiene indice unico detras, asi que
   dos clicks seguidos cargan la cosa dos veces y despues hay que borrar una a
   mano. El estado apagado es la unica barrera. */
.btn[disabled]{opacity:.6;cursor:default}
.btn[disabled]:hover{background:var(--accent);border-color:var(--accent)}
.btn-2[disabled]:hover,.btn-3[disabled]:hover{background:var(--paper)}

/* ------------------------------------------------------------
   FORMULARIOS — los primeros del portal, escritos para que la
   pantalla que venga los copie y no invente otros.

   Tres decisiones que parecen de estilo y no lo son:

   1. font-size 16px (--fs-body) en todo campo que se pueda tipear.
      Por debajo de 16, Safari de iPhone HACE ZOOM al enfocar el
      campo y deja la pantalla corrida: Benito toca "Nombre", el
      portal salta, y para ver el boton de guardar tiene que pellizcar
      para atras. No es un gusto tipografico, es que la pantalla no se
      mueva sola.

   2. min-height var(--touch) y appearance:none con border-radius:0.
      Lo primero es el area tactil con guantes; lo segundo es porque
      iOS le pone esquinas redondeadas y sombra interior a todo input,
      y este sistema visual es de esquinas rectas — salen del isotipo.

   3. El error del campo va DEBAJO del campo y en texto, no en un
      title ni en un tooltip: en el celular no hay hover, y un aviso
      que solo aparece al pasar el mouse no existe en la obra.
   ------------------------------------------------------------ */
.sh-form{display:flex;flex-direction:column;gap:16px}
.sh-campos{display:flex;flex-direction:column;gap:16px}
.sh-campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.sh-campo > label{font-family:var(--display);font-size:13px;font-weight:600;color:#35513F}
/* "(opcional)" al lado del rotulo. Se marca lo que NO hace falta y no lo que
   si: en un formulario de seis campos, cinco asteriscos rojos no informan. */
.sh-campo > label .opt{font-family:var(--text);font-weight:400;color:var(--muted)}

.sh-in,.sh-sel,.sh-ta{width:100%;min-height:var(--touch);border:1px solid var(--line-strong);
       background:var(--paper);padding:10px 12px;font-family:var(--text);font-size:var(--fs-body);
       line-height:1.4;color:var(--ink);transition:.14s ease-out;
       -webkit-appearance:none;appearance:none;border-radius:0}
.sh-in:hover,.sh-sel:hover,.sh-ta:hover{border-color:#9DB6A5}
.sh-in:focus,.sh-sel:focus,.sh-ta:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-2px}
.sh-in::placeholder,.sh-ta::placeholder{color:#8FA396}
.sh-in[disabled],.sh-sel[disabled],.sh-ta[disabled]{background:#F3F7F4;color:var(--muted);cursor:default}
.sh-ta{min-height:88px;resize:vertical;line-height:1.5}
/* Plata y cantidades: cifras tabulares, para que dos importes de la misma
   cantidad de digitos tengan el mismo ancho y se puedan comparar de un vistazo. */
.sh-in.num{font-variant-numeric:tabular-nums}
/* La flecha del combo va dibujada por CSS porque appearance:none se lleva
   puesta la del navegador. El SVG va inline en un data-uri: el chasis no puede
   pedir un segundo archivo (ESTATICOS es una lista cerrada de tres). */
.sh-sel{padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355705C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat:no-repeat;background-position:right 12px center;background-size:16px;cursor:pointer}

/* La linea de ayuda: para que sirve el campo o como se escribe. Va debajo del
   campo y en gris; no es un error. */
.sh-pista{font-size:12.5px;line-height:1.45;color:var(--muted)}

/* Campo mal cargado. El borde cambia Y aparece el texto: el color solo no
   alcanza —hay quien no lo distingue— y ademas el borde no dice que corregir. */
.sh-campo.mal > .sh-in,.sh-campo.mal > .sh-sel,.sh-campo.mal > .sh-ta{border-color:var(--error)}
.sh-campo.mal > .sh-in:focus,.sh-campo.mal > .sh-sel:focus,.sh-campo.mal > .sh-ta:focus{outline-color:var(--error)}
.sh-mal{font-size:12.5px;line-height:1.45;color:var(--error);font-weight:500}
.sh-campo:not(.mal) > .sh-mal{display:none}

/* El pie del formulario: el boton primario y, al lado, lo que esta pasando. */
.sh-form-pie{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sh-form-pie .sh-pista{flex:1;min-width:140px}

/* ------------------------------------------------------------
   TITULO DE PANTALLA Y FILTROS
   ------------------------------------------------------------ */
.sh-titulo{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.sh-titulo .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sh-titulo h1{font-size:27px;letter-spacing:-.03em;color:var(--brand);margin-top:4px}
.sh-filtros{margin-left:auto;display:flex;gap:8px}
.sh-filtros a{display:inline-flex;align-items:center;min-height:var(--touch);padding:7px 13px;
              border:1px solid var(--line-strong);color:#35513F;font-size:14px;font-weight:500}
.sh-filtros a.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;padding:8px 14px}

/* ------------------------------------------------------------
   INDICADORES
   ------------------------------------------------------------ */
.sh-kpis{display:flex;gap:16px}
.sh-kpi{flex:1;background:var(--paper);border:1px solid var(--line);padding:18px 20px;
        display:flex;flex-direction:column;gap:7px}
.sh-kpi .r{font-size:12.5px;color:var(--muted)}
.sh-kpi .v{font-family:var(--text);font-weight:600;font-size:30px;letter-spacing:-.02em;color:var(--ink)}
.sh-kpi .v.warn{color:var(--warn)} .sh-kpi .v.ok{color:var(--ok)}

/* ------------------------------------------------------------
   PANEL Y TABLA
   La tabla es una grilla CSS, no un <table>: las filas se arman con
   grid-template-columns identico en encabezado y cuerpo.
   ------------------------------------------------------------ */
.sh-panel{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
/* El `flex-wrap` y el `flex:1 1 auto` son una pareja y arreglan una sola cosa.
   El h2 tenia `flex:1` —o sea base 0— y en el telefono se encogia hasta su
   palabra mas larga: «Lo que esta en juego» salia en un h2 de 49px de ancho y
   109px de alto, CINCO renglones, uno por palabra, porque «juego» mide 49px.
   Con la base en el contenido y la cabecera plegable, el titulo se queda con el
   renglon entero y lo que lo acompaña —la cuenta, un boton— baja al de abajo.
   En escritorio no cambia nada: entran los dos en la misma linea y el h2 sigue
   creciendo para empujar al otro contra el borde. */
.sh-panel-cab{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}
.sh-panel-cab h2{font-size:19px;color:var(--brand);flex:1 1 auto}

.sh-tbl{display:flex;flex-direction:column;min-height:0;overflow:auto}
.sh-tr{display:grid;gap:16px;align-items:center;padding:15px 20px;border-bottom:1px solid #E2EFE6}
.sh-tr.cab{padding:13px 20px;background:#F5FCF7;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1}
.sh-tr.cab > *{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.1em;
               text-transform:uppercase;color:#43614C}
.sh-tr.dato{font-size:14px;color:var(--ink)}
.sh-tr.dato:nth-of-type(even){background:#FAFDFB}
.sh-tr.dato:hover{background:#F5FCF7}
.sh-tr.pie{background:#F5FCF7;border-bottom:0;border-top:1px solid var(--line);font-weight:600;color:var(--brand)}
.sh-der{text-align:right}
.sh-ref{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.sh-sub{font-size:12.5px;color:var(--muted);margin-top:2px}

/* Chips de estado */
.chip{display:inline-block;font-size:12px;font-weight:600;padding:5px 9px;justify-self:start}
.chip-curso{background:var(--apple);color:var(--brand)}
.chip-espera{background:#FFF1D6;color:#7A4A00}
.chip-ok{background:#DCF2E4;color:var(--ok)}
.chip-cerrada{background:#EDF2EF;color:var(--muted)}

/* Barra de avance */
.sh-avance{display:flex;align-items:center;gap:10px}
.sh-avance .pista{flex:1;height:6px;background:#E2EFE6}
.sh-avance .pista > i{display:block;height:6px;background:var(--accent)}
.sh-avance .v{font-size:12.5px;color:#35513F;font-variant-numeric:tabular-nums}

/* ============================================================
   CELULAR — la vista real de obra, no una degradacion
   ============================================================ */
/* EL CHASIS DE CELULAR SE ESCONDE EN ESCRITORIO, Y HAY QUE DECIRLO CON DOS
   CLASES. `.sh-m` sola empata en especificidad con `.sh-m-top` y `.sh-m-tabs`
   —que traían su `display:flex` acá abajo, fuera de todo @media— y perdía por
   orden. Medido a 2560px en /obras: «Cartera» dibujado DOS VECES (el h1 de
   celular arriba del encabezado de escritorio), la barra de solapas del teléfono
   colgando al pie de la página, y 127px de barra verde arriba de todo. Es la
   pantalla principal de Hugo y él trabaja desde la computadora.

   El display de celular vive abajo, en el mismo @media, con la misma pareja de
   clases: si se lo deja acá, vuelve a ganarle a `.sh-m`.

   OJO: obra.html es una pantalla SÓLO de celular y usa `sh-m-top` / `sh-m-tabs`
   SIN `sh-m`, a propósito — por eso el par de clases y no un `display:none` en
   `.sh-m-top` a secas, que se la llevaría puesta en escritorio. */
.sh-m,.sh-m.sh-m-top,.sh-m.sh-m-tabs{display:none}
@media (max-width:1023px){
  .sh-sb{display:none}
  .sh-top{display:none}
  .sh-app{flex-direction:column}
  .sh-body{padding:16px 18px;gap:14px}
  .sh-m{display:block}
  .sh-m.sh-m-top,.sh-m.sh-m-tabs{display:flex}
  /* LAS SOLAPAS SE QUEDAN A LA VISTA. Medido a 375px en /obras con la cartera en
     cero —el estado real de hoy—: `position: static`, la barra a 6574px de un
     documento de 6636px. Para Benito, parado en la obra y con una mano, «Precios»
     quedaba a seis mil quinientos píxeles de scroll. En /obra no pasa porque esa
     pantalla fija la altura en 100dvh y el que scrollea es el cuerpo; /obras es
     una página larga de verdad —la cartera y abajo los 27 antecedentes— y ese
     chasis no le sirve.

     `sticky` y no `fixed`: la barra sigue ocupando su lugar al final del
     documento, así que la última fila de la lista no queda tapada. Va sobre el
     par `.sh-m.sh-m-tabs` —el chasis que monta shell.js— y no sobre `.sh-m-tabs`
     a secas, que es la de obra.html: ahí la barra no scrollea y esto no haría
     nada, pero el par deja el alcance donde se midió. */
  .sh-m.sh-m-tabs{position:sticky;bottom:0;z-index:5}
  .sh-kpis{flex-direction:column}
}

.sh-m-top{background:var(--apple);border-bottom:1px solid var(--line-strong);
          padding:16px 18px 18px;display:flex;flex-direction:column;gap:16px}
.sh-m-top .fila{display:flex;align-items:center;gap:11px}
.sh-m-top b{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.035em;color:var(--brand)}
/* No hay regla para `.menu`: el único botón de hamburguesa del portal estaba en
   obra.html, no abría ningún menú —cero handlers en todo public/— y se sacó. Una
   regla de CSS huérfana es la invitación a volver a poner el botón. */
.sh-m-top .ctx{font-size:13px;color:var(--muted)}
.sh-m-top h1{font-family:var(--display);font-weight:700;font-size:25px;line-height:1.1;color:var(--brand)}

/* Acciones grandes: 60px la primaria, 56px la secundaria. Con guantes y al sol. */
.sh-accion{width:100%;display:flex;align-items:center;gap:12px;padding:0 18px;cursor:pointer;
           border:2px solid transparent;font-family:var(--display);text-align:left}
.sh-accion-1{min-height:60px;background:var(--accent);border-color:var(--accent);color:var(--brand);font-weight:700;font-size:18px}
.sh-accion-2{min-height:56px;background:var(--paper);border-color:var(--brand);color:var(--brand);font-weight:600;font-size:16.5px}
.sh-accion svg{width:24px;height:24px;flex:none;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

.sh-m-tabs{height:62px;flex:none;background:var(--paper);border-top:1px solid var(--line);display:flex}
.sh-m-tabs a,.sh-m-tabs .pronto{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
             padding:0 4px;text-align:center;border-top:2px solid transparent;color:var(--muted);font-size:11px}
/* El rótulo NO se parte en dos líneas: con cinco solapas y 62px de alto, una
   segunda línea empuja el ícono fuera de la barra. shell.js manda un rótulo
   corto para los dos que no entran; esto es la red por si aparece un tercero. */
.sh-m-tabs a > span,.sh-m-tabs .pronto > span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-m-tabs a.on{border-top-color:var(--accent);color:var(--brand);font-weight:600}
/* Solapa de una pantalla que todavía no existe. Misma marca que en la lateral:
   se ve, se entiende que viene y no se puede tocar. La dibuja shell.js como
   <span> sin href, así que ni el dedo ni el tabulador llegan al cartel de
   "todavía no está hecha". */
.sh-m-tabs .pronto{opacity:.7;cursor:default}
.sh-m-tabs .pronto .c{font-family:var(--mono);font-size:9px;letter-spacing:.1em;
                      text-transform:uppercase;color:var(--muted)}
.sh-m-tabs svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   ESTADOS Y MENSAJES
   Los mensajes dicen que hacer, no que fallo.
   ============================================================ */
.sh-vacio{padding:44px 20px;text-align:center;color:var(--muted);font-size:14.5px}
.sh-cargando{background:#F5FCF7;color:var(--muted)}
.sh-error{background:#FDECEA;border:1px solid #F3C9C5;border-left:3px solid var(--error);
          padding:12px 15px;font-size:14px;color:var(--ink)}
.sh-aviso{background:#FFF1D6;border-left:3px solid var(--warn);padding:12px 15px;font-size:14px;color:#7A4A00}
/* Salio bien. Existe por los formularios: un POST que contesta 200 y no cambia
   nada visible en la pantalla se lee como que no paso nada, y de ahi sale el
   segundo click que carga la cosa dos veces. */
.sh-ok{background:#DCF2E4;border-left:3px solid var(--ok);padding:12px 15px;font-size:14px;color:var(--brand)}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}