/* 🪪 ficha.css — LA FICHA · el fierro del gran panel (plan_gran_panel.md · GP1 · 2026-09-23)

   «No me traigas el panel, tráeme el bloque» (Jobs) · «No tiñas la física»
   (Ive) · jobs-ives.md §6. La ficha es la cosa presentándose: sin título
   «Propiedades», sin Color primero, en TINTA. Cinco renglones, siempre en
   este orden; lo que la cosa no tiene, no se dibuja:

     1 .ficha-cosa      ● nombre · el dato que la define (escrito acá y en la hoja)
     2 .ficha-hace      la línea que DICTA EL MOTOR · el verbo a la derecha
     3 .ficha-medidas   una línea que fluye: ícono chico + número
     4 .ficha-chips     tres chips, no siete · .ficha-trae lo que cada una trae
     5 .ficha-seccion   lo raro, abajo (el choque · el tono · el brazo)

   Es CSS, no HTML: cada editor escribe su ficha con estas piezas (la
   lección de la gran-diamante: el fierro es uno, el hueco es de cada
   editor). El fierro jamás sabe qué dice el renglón 2: eso es g.
   Nació de la ficha del bloque de FIS (mundo_fisico.md §25d), pieza por
   pieza, sin cambiar su foto.

   Los dos tonos los pone cada editor en su paleta (una línea):
     .ficha { --ficha-ink: #1c2b25; --ficha-soft: #e6efe9 }
*/

.ficha {
  --ficha-ink: #1c1917;
  --ficha-soft: #e7e5e4;
  color: var(--ficha-ink);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; line-height: 20px;
}
.ficha input, .ficha button { color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; }
.ficha input:focus { outline: none; }

/* 1 · la cosa */
.ficha-cosa { display: flex; align-items: center; gap: 8px; }
.ficha-punto {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px; flex: none;
  border: 1px solid var(--ficha-ink);
}
.ficha-punto.sujeto { background: var(--ficha-ink); }
.ficha-nombre, .ficha-dato {
  background: transparent; border: 0; border-bottom: 1px dashed transparent;
  padding: 0; min-width: 0;
}
.ficha .ficha-nombre { width: 28px; font-size: 16px; line-height: 24px; font-weight: 600; text-align: center; }
.ficha-dato { width: 40px; text-align: left; }
.ficha-nombre:hover, .ficha-dato:hover { border-bottom-color: color-mix(in srgb, var(--ficha-ink) 40%, transparent); }
.ficha-nombre:focus, .ficha-dato:focus { border-bottom-color: var(--ficha-ink); }
.ficha-sep { opacity: .5; }
.ficha-unidad { font-size: 12px; line-height: 16px; opacity: .5; }

/* 2 · lo que hace · la primera línea la dicta el motor */
.ficha-hace { display: flex; align-items: center; gap: 8px; padding-left: 16px; min-width: 0; }
.ficha-hace .texto { opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ficha .ficha-verbo {
  margin-left: auto; flex: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 11px; line-height: 16px; opacity: .5;
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.ficha-verbo:hover { opacity: 1; }

/* las secciones: un hairline arriba */
.ficha-seccion { border-top: 1px solid var(--ficha-soft); padding-top: 6px; }
.ficha-seccion.alta { padding-top: 8px; }
.ficha .ficha-titulillo {
  font-size: 10px; line-height: 14px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 600; opacity: .5; margin-bottom: 6px;
}

/* 3 · las medidas · una línea que fluye */
.ficha-medidas { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 4px; }
.ficha-medida { display: flex; align-items: center; gap: 4px; border-radius: 4px; padding: 0 4px; }
.ficha-medida:hover { background: color-mix(in srgb, var(--ficha-ink) 5%, transparent); }
.ficha-medida svg { width: 14px; height: 14px; flex: none; opacity: .5; }
.ficha-medida input {
  width: 48px; min-width: 0; background: transparent; border: 0; padding: 0; text-align: right;
}
.ficha-num {
  background: transparent; border: 0; border-bottom: 1px solid var(--ficha-soft);
  padding: 0; text-align: right;
}
.ficha-fila { display: flex; align-items: center; gap: 8px; }
.ficha-fila.chica { gap: 6px; font-size: 12px; line-height: 16px; }

/* 4 · lo que se ve · tres chips, no siete */
.ficha-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ficha .ficha-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--ficha-ink);
  background: transparent; cursor: pointer;
  font-size: 12px; line-height: 16px; font-weight: 600;
  transition: background-color .15s, color .15s;
}
.ficha-chip svg { width: 12px; height: 12px; }
.ficha-chip.on { background: var(--ficha-ink); color: #fff; }
.ficha-chip.plana { font-weight: 400; }
.ficha-trae {
  margin-top: 6px; display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 4px;
  font-size: 12px; line-height: 16px; min-height: 1.4em;
}
.ficha-check { display: flex; align-items: center; gap: 4px; }
.ficha-check input[type="checkbox"] { width: 12px; height: 12px; accent-color: var(--ficha-ink); margin: 0; }
.ficha-check.mediana input[type="checkbox"] { width: 14px; height: 14px; }
.ficha-check .suave { opacity: .6; }

/* 5 · lo raro · el tono en gotas */
.ficha-gotas { display: flex; align-items: center; gap: 6px; }
.ficha-gota {
  width: 16px; height: 16px; border-radius: 999px; border: 1px solid var(--ficha-soft);
  padding: 0; cursor: pointer;
}
.ficha-gota.on { box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--ficha-ink); }

/* 6 · borrar · Supr en el PC; en el celular, un botoncito al final de la ficha
   (Pablo 23-09: «si estoy en el celular y toco un objeto necesito un botoncito de
   eliminación»). Solo se ve donde no hay teclado con Supr. En tinta, chico. */
.ficha-borrar {
  display: none; align-items: center; gap: 6px; margin-top: 2px;
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font-size: 12px; line-height: 16px; opacity: .6;
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.ficha-borrar:active { opacity: 1; }
@media (hover: none), (max-width: 767px) {
  .ficha-borrar { display: inline-flex; }
}

/* ═══ 7 · EL CUERPO DE LA FICHA · lo que cada objeto trae debajo, en tinta ═══
   (GP2 real · 23-09 · Pablo: «dale con todo»). Los formularios de cada objeto
   nacieron con el verde de la casa en subtítulos, botones e inputs con caja.
   Esta capa los pone en tinta SIN tocar su HTML: la tarjeta que tiene una
   `.ficha-cosa` es una ficha entera, y adentro: los subtítulos son titulillos
   (tinta al 50 %), los botones son de tinta, los inputs pierden la caja (una
   raya abajo, como el nombre y el dato del bloque), el ✕ de una fila es de
   tinta. El color de la casa se queda en la app (▶ · Render/Gráfica), afuera. */
.hoja-flot:has(.ficha-cosa) {
  color: var(--ficha-ink, #1c1917);
}
.hoja-flot:has(.ficha-cosa) .text-mlab-primary,
.hoja-flot:has(.ficha-cosa) .text-mlab-primary\/70 {
  color: var(--ficha-ink, #1c1917);
}
.hoja-flot:has(.ficha-cosa) .uppercase.text-mlab-primary,
.hoja-flot:has(.ficha-cosa) .uppercase.text-mlab-primary\/70 {
  opacity: .5; font-size: 10px; letter-spacing: .05em;
}
.hoja-flot:has(.ficha-cosa) .bg-mlab-primary { background: var(--ficha-ink, #1c1917); }
.hoja-flot:has(.ficha-cosa) .bg-mlab-primary\/75 { background: var(--ficha-ink, #1c1917); opacity: .85; }
.hoja-flot:has(.ficha-cosa) .hover\:bg-mlab-primary:hover { background: var(--ficha-ink, #1c1917); }
.hoja-flot:has(.ficha-cosa) button[style*="color"] { color: var(--ficha-ink, #1c1917) !important; }
.hoja-flot:has(.ficha-cosa) .text-red-300,
.hoja-flot:has(.ficha-cosa) .text-red-400 { color: var(--ficha-ink, #1c1917); opacity: .4; }
.hoja-flot:has(.ficha-cosa) .text-red-300:hover,
.hoja-flot:has(.ficha-cosa) .text-red-400:hover { opacity: .9; color: var(--ficha-ink, #1c1917); }
/* los inputs pierden la caja: una raya abajo, en tinta */
.hoja-flot:has(.ficha-cosa) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.hoja-flot:has(.ficha-cosa) select,
.hoja-flot:has(.ficha-cosa) textarea {
  background: transparent; color: inherit;
  border: 0; border-bottom: 1px solid var(--ficha-soft, #e7e5e4); border-radius: 0;
  padding-left: 2px; padding-right: 2px; box-shadow: none;
}
.hoja-flot:has(.ficha-cosa) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
.hoja-flot:has(.ficha-cosa) select:focus,
.hoja-flot:has(.ficha-cosa) textarea:focus {
  outline: none; border-bottom-color: var(--ficha-ink, #1c1917);
}
.hoja-flot:has(.ficha-cosa) input[type="checkbox"],
.hoja-flot:has(.ficha-cosa) input[type="radio"],
.hoja-flot:has(.ficha-cosa) input[type="range"] { accent-color: var(--ficha-ink, #1c1917); }
/* las notas al pie de los formularios: más chicas y calladas */
.hoja-flot:has(.ficha-cosa) .text-mlab-muted { opacity: .7; }

/* ═══ 8 · EL CELULAR · la ficha es una hoja que sube desde abajo (GP6) ═══
   Bajo 767 px `hoja.css` ya manda los flotantes a la franja de abajo. Acá la
   ficha se comporta como una hoja de celular: el asa arriba, los bordes
   redondeados, y todo lo que fluye se envuelve (las medidas, las chips, el
   renglón de la cosa). Nada empuja la hoja: se superpone (jobs-ives.md §3). */
@media (max-width: 767px) {
  .hoja-flot:has(.ficha-cosa) {
    border-radius: 14px 14px 10px 10px; padding-top: 14px; position: relative;
  }
  .hoja-flot:has(.ficha-cosa)::before {
    content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px;
    margin-left: -18px; border-radius: 4px;
    background: var(--ficha-ink, #1c1917); opacity: .18;
  }
  .ficha-cosa, .ficha-hace { flex-wrap: wrap; row-gap: 2px; }
  .ficha-hace .texto { white-space: normal; }
  .ficha { font-size: 15px; line-height: 21px; }
  .ficha .ficha-nombre { font-size: 17px; }
  .ficha-medida input { width: 56px; }
  .ficha .ficha-chip { padding: 4px 10px; font-size: 13px; }
  .ficha-check input[type="checkbox"] { width: 16px; height: 16px; }
  .hoja-flot:has(.ficha-cosa) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .hoja-flot:has(.ficha-cosa) select { min-height: 34px; font-size: 15px; }
}