/*
 * estilo.css — Hoja de estilos compartida del motor de formularios
 * Instalada en /etc/me/estilo.css
 * Editá este archivo para cambiar el aspecto de todos los formularios.
 *
 * Servida por mes en: http://localhost:8000/web/estilo.css
 */

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
  --color-primario:    #2e5c8a;
  --color-oscuro:      #1f3b57;
  --color-borde:       #aaa;
  --color-fondo:       #ffffff;
  --color-fondo-alt:   #f8fbfd;
  --color-fondo-nodo:  #eef4fb;
  --color-borde-nodo:  #c8dff0;
  --color-texto:       #222222;
  --color-texto-suave: #666666;
  --color-error:       #cc0000;
  --color-ok:          #006600;
  --color-oblig:       #cc0000;
  --fuente:            sans-serif;
  --radio:             3px;
  --max-ancho:         680px;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
  font-family:    var(--fuente);
  color:          var(--color-texto);
  background:     var(--color-fondo);
  max-width:      var(--max-ancho);
  margin:         2em auto;
  padding:        0 1em;
  line-height:    1.5;
}

h1 {
  color:          var(--color-primario);
  border-bottom:  2px solid var(--color-primario);
  padding-bottom: .3em;
}

h2 {
  color:          var(--color-primario);
  margin-top:     1.5em;
}

/* ── Formularios ──────────────────────────────────────────────────────────── */
.campo {
  margin-bottom: 1.4em;
}

label {
  display:       block;
  font-weight:   bold;
  margin-bottom: .3em;
}

.oblig {
  color: var(--color-oblig);
}

input[type=text],
input[type=number],
input[type=email],
input[type=url],
input[type=date],
input[type=time],
input[type=password],
input[type=search],
input[type=tel],
select,
textarea {
  width:          100%;
  padding:        .4em;
  border:         1px solid var(--color-borde);
  border-radius:  var(--radio);
  font-size:      1em;
  box-sizing:     border-box;
  background:     var(--color-fondo);
  color:          var(--color-texto);
}

textarea {
  min-height: 6em;
  resize:     vertical;
}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.btn {
  background:    var(--color-primario);
  color:         white;
  border:        none;
  padding:       .4em 1em;
  border-radius: var(--radio);
  cursor:        pointer;
  font-size:     .95em;
}

.btn:hover {
  background: var(--color-oscuro);
}

/* 0252.12 — feedback visible al presionar */
.btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.btn-sec {
  background: #888;
}

.btn-sec:hover {
  background: #555;
}

.btn-danger {
  background: var(--color-error);
  padding:    .2em .5em;
  font-size:  .8em;
}

.btn-danger:hover {
  background: #900;
}

/* Botón en estado "trabajando" — pulso sutil */
.btn.trabajando {
  animation: pulso-btn 1s ease-in-out infinite;
}
@keyframes pulso-btn {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.btn-sm {
  padding:   .25em .7em;
  font-size: .85em;
}

/* ── Estado y mensajes ────────────────────────────────────────────────────── */
#estado {
  font-size:  .9em;
  margin:     .5em 0 1em;
  min-height: 1.2em;
  color:      var(--color-primario);
}

.error {
  color:     var(--color-error);
  font-size: .9em;
  margin-top: .3em;
}

.vacio {
  color:      var(--color-texto-suave);
  font-style: italic;
}

.nota {
  font-size:  .85em;
  color:      var(--color-texto-suave);
  margin-top: 1.5em;
}

/* ── Ítems de campo ───────────────────────────────────────────────────────── */
.items-lista {
  margin: .4em 0;
}

/* .item-existente ya NO se estiliza aparte — es solo un <tr> más de
   la .campo-tabla. Cualquier estilo va en .campo-tabla o sus tds. */

.items-acciones {
  margin-top: .3em;
}

/* ── Campo general (archivo + texto) ──────────────────────────────────────── */
.general-campo textarea {
  margin-bottom: .3em;
}

.general-acciones {
  display:     flex;
  align-items: center;
  gap:         .5em;
  flex-wrap:   wrap;
}

.archivos-lista {
  font-size:   .85em;
  color:       var(--color-texto-suave);
  margin-left: .5em;
}

/* ── Árbol de nodos (me.html) ─────────────────────────────────────────────── */
.arbol {
  margin: .5em 0;
}

.nodo {
  margin: .3em 0;
}

.nodo-header {
  display:       flex;
  align-items:   center;
  gap:           .5em;
  padding:       .4em .6em;
  border-radius: var(--radio);
  background:    var(--color-fondo-nodo);
  border:        1px solid var(--color-borde-nodo);
  cursor:        pointer;
  user-select:   none;
}

.nodo-header:hover {
  background: #daeaf7;
}

.nodo-path  { font-weight: bold; font-size: .95em; }
.nodo-desc  { font-size: .82em; color: var(--color-texto-suave); }
.nodo-meta  { font-size: .78em; color: #888; margin-left: auto; }
.nodo-hijos { margin-left: 1.5em; margin-top: .2em; }

/* ── Instancias ───────────────────────────────────────────────────────────── */
.instancia {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         .35em .6em;
  margin:          .25em 0;
  border:          1px solid #d5e8f0;
  border-radius:   var(--radio);
  background:      var(--color-fondo-alt);
}

.instancia:hover {
  background: #e8f4fb;
}

.inst-info .tipo { font-size: .78em; color: var(--color-texto-suave); }
.inst-info .meta { font-size: .78em; color: #888; }
.lock            { font-size: .78em; color: var(--color-error); margin-left: .4em; }

/* ── Configuración y tabs ─────────────────────────────────────────────────── */
.config {
  font-size:   .85em;
  color:       var(--color-texto-suave);
  margin-bottom: .5em;
  display:     flex;
  gap:         .5em;
  flex-wrap:   wrap;
  align-items: center;
}

.config input[type=text] {
  width: 200px;
}

.tabs {
  display:       flex;
  gap:           .3em;
  margin-bottom: .8em;
  border-bottom: 2px solid #d0e6f5;
  padding-bottom: .4em;
}

.tab {
  padding:       .3em .9em;
  border-radius: 4px 4px 0 0;
  cursor:        pointer;
  font-size:     .9em;
  color:         #555;
}

.tab.activo {
  background: var(--color-primario);
  color:      white;
}

/* ── Sección nueva instancia/nodo ─────────────────────────────────────────── */
.nueva-seccion {
  background:    var(--color-fondo-alt);
  border:        1px solid #d0e6f5;
  border-radius: 6px;
  padding:       1em;
  margin-top:    .5em;
}

.form-fila {
  display:       flex;
  gap:           .5em;
  flex-wrap:     wrap;
  margin-bottom: .4em;
  align-items:   center;
}

.form-fila label {
  font-size: .88em;
  min-width: 80px;
  font-weight: normal;
}

.form-fila input,
.form-fila select {
  flex:      1;
  min-width: 150px;
}

.dep-info {
  font-size: .75em;
  color:     #aaa;
  font-style: italic;
  margin-left: .3em;
}
.volver {
  font-size:    .9em;
  margin-bottom: 1em;
}

.volver a {
  color: var(--color-primario);
}

.path-inst {
  font-size:    .9em;
  color:        var(--color-texto-suave);
  margin-bottom: 1em;
}

/* ── Vista previa PDF inline ──────────────────────────────────────── */
.pdf-preview {
  margin-top: .8em;
  border: 1px solid var(--color-borde);
  border-radius: 4px;
  overflow: hidden;
}
.pdf-iframe {
  display:  block;
  width:    100%;
  height:   520px;
  border:   none;
}
.pdf-loading {
  padding: 1.5em;
  color:   var(--color-texto-suave);
  font-style: italic;
}
.pdf-error {
  padding: 1em;
  color:   #c00;
  font-size: .9em;
}
.pdf-acciones {
  display:    flex;
  gap:        .5em;
  padding:    .5em .8em;
  background: var(--color-fondo-alt, #f5f5f5);
  border-top: 1px solid var(--color-borde);
}
.btn-pdf {
  background: #005a9c;
  color:      #fff;
}
.btn-pdf:hover {
  background: #003f6e;
}

/* ── Resultados de búsqueda ───────────────────────────────────────── */
.resultado-busqueda {
  border: 1px solid var(--color-borde);
  border-radius: 4px;
  padding: .7em 1em;
  margin-bottom: .6em;
}
.res-header {
  display: flex;
  gap: .5em;
  align-items: center;
  margin-bottom: .3em;
}
.res-fragmento {
  font-family: monospace;
  font-size: .85em;
  color: var(--color-texto-suave);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── Estado de sesión ─────────────────────────────────────────────── */
.sesion-estado {
  display:    flex;
  gap:        1.5em;
  align-items: center;
  flex-wrap:  wrap;
  padding:    .5em 1em;
  background: var(--color-fondo-alt, #f0f4f8);
  border-bottom: 1px solid var(--color-borde);
  font-size:  .9em;
  margin-bottom: .5em;
}
.inst-sel-vacia  { color: var(--color-texto-suave); font-style: italic; }
.inst-sel-activa { color: var(--color-primario); font-weight: 500; }

/* ── Tabs de instancia ────────────────────────────────────────────── */
.tabs-inst { margin-top: 0; border-top: none; }
.tab-inst  { border-left: 3px solid var(--color-primario); }
.tab-danger { color: #c00; }
.tab-danger:hover, .tab-danger.activo { background: #fde; color: #900; }

/* ── Cabecera de instancia ────────────────────────────────────────── */
.inst-cabecera {
  padding:    .6em 1em;
  background: #e8f0fb;
  border:     1px solid #b8d0f0;
  border-radius: 4px;
  margin:     .5em 0;
  font-family: monospace;
}
.path-label  { font-size: 1em; font-weight: 600; }
.tipo-label  { margin-left: .8em; color: #555; font-size: .9em; }

/* ── Ver contenido ────────────────────────────────────────────────── */
.campo-ver    { margin: .8em 0; padding: .5em .8em;
                border-left: 3px solid var(--color-borde); }
.campo-extra  { border-left-color: #e08000; background: #fff8ee; }
.campo-etiqueta { font-weight: 600; margin-bottom: .3em; font-size: .9em; }
.badge-extra  { background: #e08000; color: #fff; font-size: .7em;
                padding: 1px 5px; border-radius: 3px; font-weight: normal; }
.item-ver     { margin: .2em 0; font-size: .9em; }
.item-nombre  { font-family: monospace; color: #555; }
.item-texto   { font-family: monospace; font-size: .85em; white-space: pre-wrap;
                color: #333; margin: .2em 0 .2em 1em;
                max-height: 8em; overflow: auto; }
.aviso-edicion { background: #fff3cd; border: 1px solid #ffc107;
                 border-radius: 4px; padding: .4em .8em;
                 margin-bottom: .5em; font-size: .9em; }

/* ── Iframe de formulario (editar datos) ──────────────────────────── */
.form-iframe {
  width:  100%;
  height: 80vh;
  border: 1px solid var(--color-borde);
  border-radius: 4px;
  margin-top: .5em;
}

/* ── Ítems en formulario gf ───────────────────────────────────────── */
.campo-titulo {
  font-weight: 600;
  margin-bottom: .4em;
  font-size: .95em;
}
/* .item-existente: sin background, sin font-size especial — se ve
   igual que la fila de Agregar y las de metadatos. */
/* Tabla de ítems por campo — 3 columnas: nombre, contenido, botones.
   Anchos declarados via <colgroup> para que col 2 SIEMPRE tome el
   ancho restante y col 1/col 3 sean fit-content. */
.campo-tabla {
  width:           100%;
  border-collapse: collapse;
  margin-top:      .3em;
  table-layout:    auto;
}
/* <col> anchos: col-nombre y col-acciones fit-content; col-contenido
   fluid (100% del resto). */
.campo-tabla col.colg-nombre    { width: 1%; }
.campo-tabla col.colg-contenido { width: 99%; }
.campo-tabla col.colg-acciones  { width: 1%; }
.campo-tabla td {
  vertical-align: middle;
  padding:        .3em .5em;
}
.campo-tabla .col-nombre {
  white-space: nowrap;
}
.campo-tabla .col-contenido input,
.campo-tabla .col-contenido textarea,
.campo-tabla .col-contenido select {
  width: 100%;
  box-sizing: border-box;
}
/* 0251.11 — cap a la MITAD del anterior (Diego). */
.campo-tabla .col-contenido input {
  max-width: min(15em, 25vw);
}
.campo-tabla .col-contenido textarea {
  max-width: min(30em, 35vw);
}
/* Textarea como CUADRO — no línea infinita. Altura mínima para que se
   note el multi-línea, resize vertical opcional. */
.campo-tabla .col-contenido textarea {
  min-height:  5em;
  resize:      vertical;
  font-family: monospace;
  padding:     .3em .5em;
  border:      1px solid #ccc;
  border-radius: 3px;
  line-height: 1.4;
}
.campo-tabla .col-acciones {
  white-space: nowrap;
  text-align:  right;
}
/* Fila de metadatos: SÓLO col 2 tiene contenido, col 1 y col 3 vacías.
   Sin colspan — mantiene alineación estricta con las demás filas.
   Letra chica gris. */
.campo-tabla .item-meta-tr td.item-meta-td {
  color:      #888;
  font-size:  .82em;
  padding-top: 0;
  padding-bottom: .4em;
}
.campo-tabla .item-meta-tr td:empty { padding: 0; }
.campo-tabla .item-hist-tr td:empty { padding: 0; }
.campo-tabla .item-ia-tr   td:empty { padding: 0; }
.campo-tabla .campo-estado-tr td:empty { padding: 0; }
.item-num {
  color:      var(--color-texto-suave);
  font-size:  .8em;
  min-width:  2em;
}
.item-preview {
  flex: 1;
  font-family: monospace;
  overflow:   hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-acciones {
  display: flex;
  gap:     .3em;
  flex-shrink: 0;
}
/* Ahora .campo-agregar es un <tbody> de la campo-tabla — sin flex. */
.campo-agregar { }
.campo-agregar-tr { }
.campo-estado-tr td { padding: 0 .5em; }
/* .campo-estado: puede llevar mensaje de error largo — que wrapee. */
.campo-estado {
  font-size:    .85em;
  white-space:  normal;
  display:      inline-block;
  max-width:    100%;
}
/* Nombre en la fila Agregar: mismo tipo y tamaño que .item-nombre,
   pero en NEGRITA (el nombre "que estará"). Los existentes no llevan
   negrita — se distinguen visualmente sin cargar la vista. */
.campo-agregar-label {
  font-family: monospace;
  color:       #333;
  font-size:   1em;
  font-weight: bold;
  flex-shrink: 0;
}
/* Nombres de ítems: NEGRITA tanto los existentes como el label del
   Agregar (col 1 de la campo-tabla). Mismo font-family / tamaño. */
.campo-tabla .item-nombre {
  font-family: monospace;
  color:       #333;
  font-size:   1em;
  font-weight: bold;
}
/* Sub-header: el tipo del campo, una vez debajo del campo-titulo. */
.campo-tipo {
  color:       #888;
  font-size:   .82em;
  font-family: monospace;
  margin-bottom: .3em;
  margin-left: 1em;
}
/* Preview del contenido: cap absoluto + ellipsis. 0251.11 —
   reducido a la mitad. */
.campo-tabla .item-preview {
  font-family: monospace;
  display:     inline-block;
  max-width:   min(25em, 30vw);
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
/* Barra de botones dentro de una celda: gap chico + flex-wrap para
   que envuelvan verticalmente si son muchos (Ver/Editar/Eliminar/
   Ejecutar + botones IA todos en col 3). */
.campo-tabla .item-acciones {
  display:    flex;
  flex-wrap:  wrap;
  gap:        .3em;
  align-items: center;
  justify-content: flex-end;
}
/* Contenedor de botones IA dentro de accDiv — sin flex propio, deja
   que hereden el wrap del .item-acciones padre. */
.campo-tabla .item-acciones .item-ia {
  display: contents;
}
.campo-agregar-obsoleto-input-flex,
.campo-agregar-obsoleto-textarea,
.campo-agregar-obsoleto-select {
  /* Antes flex: 1 min-width: 150px — no aplica en tabla. */
  flex: 1;
  min-width: 150px;
}

/* ── Indicador de estado por campo ───────────────────────────────── */
.campo-estado {
  font-size:   1.1em;
  font-weight: bold;
  min-width:   1.5em;
  display:     inline-block;
}