/* =====================================================================
   panel.css — Estilos del panel de administración de KATALOG
   UBICACIÓN: katalog/css/panel.css
===================================================================== */

:root{
  --naranja:#FF6A00; --naranja-hondo:#D94F00; --naranja-claro:#FFF3E8;
  --tinta:#241C15; --tinta-suave:#6B5E52;
  --crema:#FFFBF7; --blanco:#FFF; --linea:#F0DFCB;
  --verde:#1F8A3B; --rojo:#B23A3A; --azul:#2563A8;
}

*{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:'Inter',system-ui,sans-serif; background:var(--crema); color:var(--tinta); line-height:1.5; }
a{ color:inherit; text-decoration:none; }

/* ===== BARRA ===== */
.barra{
  background:var(--naranja); color:#fff; padding:14px 24px;
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marca{
  font-family:'Sora',sans-serif; font-weight:800; font-size:1.15rem;
  letter-spacing:-.04em; display:flex; align-items:center; gap:9px;
}
.marca svg{ width:24px; height:24px; }
.quien{ display:flex; align-items:center; gap:14px; font-size:.86rem; }
.rol{
  background:rgba(255,255,255,.22); padding:3px 10px; border-radius:20px;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.salir{ color:#FFE3CB; font-weight:600; }
.salir:hover{ color:#fff; }

/* ===== MENÚ ===== */
.menu{
  background:var(--blanco); border-bottom:1px solid var(--linea);
  padding:0 24px; display:flex; gap:4px; overflow-x:auto;
}
.menu a{
  padding:13px 18px; font-size:.9rem; font-weight:600; color:var(--tinta-suave);
  border-bottom:3px solid transparent; white-space:nowrap;
}
.menu a:hover{ color:var(--tinta); }
.menu a.activo{ color:var(--naranja-hondo); border-bottom-color:var(--naranja); }

/* ===== CONTENIDO ===== */
.contenido{ max-width:1200px; margin:0 auto; padding:26px 24px 60px; }

.tarjetas{
  display:grid; gap:14px; margin-bottom:24px;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
}
.tarjeta{
  background:var(--blanco); border:1px solid var(--linea); border-radius:12px;
  padding:16px 18px; transition:border-color .15s, transform .15s;
}
.tarjeta:hover{ border-color:var(--naranja); transform:translateY(-2px); }
.tarjeta .rotulo{ font-size:.76rem; color:var(--tinta-suave); }
.tarjeta .numero{ font-family:'Sora',sans-serif; font-weight:800; font-size:1.7rem; margin-top:4px; }
.tarjeta.alerta-t{ border-color:var(--naranja); background:var(--naranja-claro); }
.tarjeta.alerta-t .numero{ color:var(--naranja-hondo); }

.caja{
  background:var(--blanco); border:1px solid var(--linea); border-radius:12px;
  padding:22px; margin-bottom:20px;
}
.caja h2{ font-family:'Sora',sans-serif; font-size:1.05rem; margin-bottom:10px; }

/* ===== TABLAS ===== */
table{ width:100%; border-collapse:collapse; font-size:.9rem; }
th{
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.5px;
  color:var(--tinta-suave); padding:9px 8px; border-bottom:2px solid var(--linea); white-space:nowrap;
}
td{ padding:11px 8px; border-bottom:1px solid var(--linea); vertical-align:top; }
tr:last-child td{ border-bottom:none; }

/* ===== BOTONES Y CAMPOS ===== */
.boton{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--naranja); color:#fff; border:none; border-radius:8px;
  padding:9px 16px; font-family:inherit; font-weight:700; font-size:.86rem;
  cursor:pointer; transition:opacity .15s;
}
.boton:hover{ opacity:.9; }
.boton.gris{ background:#E8E0D7; color:var(--tinta); }
.boton.rojo{ background:var(--rojo); color:#fff; }
.boton.mini{ padding:6px 12px; font-size:.79rem; }

input[type=text], input[type=password], input[type=number], input[type=email], select{
  padding:9px 11px; border:1.5px solid var(--linea); border-radius:7px;
  font-family:inherit; font-size:.88rem; background:var(--crema); width:100%;
}
input:focus, select:focus{ outline:none; border-color:var(--naranja); background:var(--blanco); }
.mini-input{ max-width:150px; }

.linea-campos{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:10px; }
.mini-rotulo{
  display:flex; flex-direction:column; gap:4px;
  font-size:.76rem; font-weight:600; color:var(--tinta-suave); flex:1; min-width:140px;
}
.ancho-total{ width:100%; display:block; margin-top:10px; }
.casilla{ display:flex; align-items:center; gap:7px; font-size:.86rem; font-weight:600; color:var(--tinta-suave); }
.casilla input{ width:auto; }
.en-linea{ display:inline-flex; gap:6px; align-items:center; }

/* ===== ETIQUETAS ===== */
.etiqueta{
  display:inline-block; font-size:.7rem; font-weight:700;
  padding:3px 9px; border-radius:20px; white-space:nowrap;
}
.etiqueta.verde{ background:#E7F5EA; color:var(--verde); }
.etiqueta.gris{ background:#EEE8E1; color:var(--tinta-suave); }
.etiqueta.roja{ background:#FDECEC; color:var(--rojo); }
.etiqueta.naranja{ background:var(--naranja-claro); color:var(--naranja-hondo); }
.etiqueta.azul{ background:#E8F0FA; color:var(--azul); }

/* ===== ACCIONES DE UNA TIENDA ===== */
.fila-acciones td{ background:var(--crema); }
.acciones-caja{ display:flex; flex-direction:column; gap:16px; padding:6px 0; }
.bloque{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:10px; padding:14px;
}
.bloque strong{ font-size:.88rem; }
.bloque.peligro{ border-color:#E8A5A5; background:#FFFAFA; }

/* ===== SOLICITUDES ===== */
.solicitud{
  border:1px solid var(--linea); border-radius:10px;
  padding:16px; margin-bottom:14px;
}
.solicitud-datos{ margin-bottom:10px; }
.nota-cliente{
  background:var(--crema); border-left:3px solid var(--naranja);
  padding:8px 12px; margin-top:8px; font-size:.86rem; color:var(--tinta-suave);
}

/* ===== ALERTAS ===== */
.alerta{
  padding:13px 16px; border-radius:9px; font-size:.9rem;
  margin-bottom:18px; line-height:1.6;
}
.alerta.ok{ background:#E7F5EA; border:1px solid #9FD3AC; color:#1a6b30; }
.alerta.error{ background:#FDECEC; border:1px solid #E8A5A5; color:var(--rojo); }
.alerta.aviso{ background:var(--naranja-claro); border:1px solid #FFD9B8; color:#B35A00; }
.alerta .boton{ margin-top:8px; margin-right:6px; }
code.clave{
  background:var(--tinta); color:#fff; padding:4px 10px; border-radius:6px;
  font-size:1rem; letter-spacing:1px; display:inline-block; margin:4px 0;
}

/* ===== VARIOS ===== */
.vacio{ color:var(--tinta-suave); font-size:.9rem; padding:16px 0; text-align:center; }
.chico{ font-size:.78rem; color:var(--tinta-suave); }
.chico a{ color:var(--naranja-hondo); font-weight:600; }
.rojo{ color:var(--rojo); font-weight:600; }
.pie-chico{ text-align:center; font-size:.78rem; color:var(--tinta-suave); padding:0 0 30px; }

@media (max-width:820px){
  table, thead, tbody, th, td, tr{ display:block; }
  th{ display:none; }
  td{ border:none; padding:5px 0; }
  tr{ border-bottom:1px solid var(--linea); padding:12px 0; }
  .contenido{ padding:18px 14px 50px; }
}

/* Plantillas: dos columnas de qué se copia y qué no */
.dos-columnas{
  display:grid; gap:14px; margin:14px 0;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.lista-chica{ margin:8px 0 8px 18px; font-size:.82rem; line-height:1.8; }
.lista-chica code{
  background:var(--crema); padding:2px 6px; border-radius:4px; font-size:.95em;
}

/* =====================================================================
   Añadidos de la versión por secciones
===================================================================== */
.titulo-pagina{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.titulo-pagina h1{ font-family:'Sora',sans-serif; font-size:1.35rem; }
.tarjeta.activa-f{ border-color:var(--naranja); box-shadow:0 0 0 2px var(--naranja-claro); }
a.tarjeta{ display:block; }
.filtro-texto{ max-width:280px; }
.nombre-tienda{ font-weight:700; }
.nombre-tienda a{ color:var(--naranja-hondo); }
.nombre-tienda small{ display:block; font-weight:400; color:var(--tinta-suave); font-size:.78rem; }
.rejilla-form{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.rejilla-form label{ display:flex; flex-direction:column; gap:5px; font-size:.8rem; font-weight:600; color:var(--tinta-suave); }
.rejilla-form .ancho{ grid-column:1 / -1; }
.rejilla-form label.casilla{ flex-direction:row; align-items:center; font-size:.86rem; }
.ayuda{ font-weight:400; font-size:.75rem; color:var(--tinta-suave); }
.previa-url{ font-family:ui-monospace,monospace; font-size:.82rem; background:var(--crema); border:1px dashed var(--linea); border-radius:7px; padding:8px 10px; word-break:break-all; }
.opciones-plantilla{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
.opcion{ border:1.5px solid var(--linea); border-radius:10px; padding:12px 14px; cursor:pointer; display:flex; gap:10px; align-items:flex-start; background:var(--blanco); }
.opcion:has(input:checked){ border-color:var(--naranja); background:var(--naranja-claro); }
.opcion input{ margin-top:3px; accent-color:var(--naranja); }
.opcion.deshabilitada{ opacity:.55; cursor:not-allowed; }
.opcion strong{ display:block; font-size:.9rem; }
.clave-grande{ font-family:ui-monospace,monospace; font-size:1.5rem; letter-spacing:3px; background:var(--tinta); color:#fff; padding:10px 18px; border-radius:8px; display:inline-block; margin:6px 0; }
.boton.verde{ background:var(--verde); }
.boton.contorno{ background:var(--blanco); color:var(--naranja-hondo); border:1.5px solid var(--linea); }
.acciones{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.dato{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--linea); font-size:.88rem; }
.dato:last-child{ border-bottom:none; }
.dato span:first-child{ color:var(--tinta-suave); }
.dato span:last-child{ font-weight:600; text-align:right; }
.menu .derecha{ margin-left:auto; }
.aviso-deteccion{ border-left:4px solid var(--naranja); }

/* =====================================================================
   RESPONSIVE — ajustes para tableta y celular
===================================================================== */

/* Cajas de acciones: más anchas en computador */
.acciones{ grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); }

/* Datos de la tienda: el valor puede ser largo (la dirección) */
.dato span:last-child{ min-width:0; overflow-wrap:anywhere; }
.dato span:first-child{ flex-shrink:0; }
.dato-largo{ flex-direction:column; gap:2px; }
.dato-largo span:last-child{ text-align:left; font-size:.8rem; }
.dato-largo a{ color:var(--naranja-hondo); }

/* Nada se sale de su caja */
.caja, .tarjeta, .alerta{ min-width:0; overflow-wrap:anywhere; }
code.clave{ max-width:100%; overflow-x:auto; }

@media (max-width:820px){
  /* Menú: todas las opciones a la vista, en dos filas si hace falta */
  .menu{ flex-wrap:wrap; padding:6px 10px; gap:2px; overflow:visible; }
  .menu a{ padding:8px 11px; font-size:.84rem; border-bottom:none; border-radius:7px; }
  .menu a.activo{ background:var(--naranja-claro); }
  .menu .derecha{ margin-left:0; }
  .barra{ padding:12px 14px; }
  .quien{ gap:10px; font-size:.8rem; }

  /* Tablas como tarjetas: cada dato con su nombre al lado */
  table thead{ display:none; }
  table tr{ border:1px solid var(--linea); border-radius:10px; padding:10px 12px; margin-bottom:10px; background:var(--blanco); }
  table tr:last-child{ border-bottom:1px solid var(--linea); }
  table td{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:4px 0; text-align:right; }
  table td[data-label]::before{
    content:attr(data-label); flex-shrink:0; text-align:left;
    font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--tinta-suave); padding-top:2px;
  }
  table td:not([data-label]){ display:block; text-align:left; }
  table td[data-label] > div{ min-width:0; max-width:65%; }
  table td.nombre-tienda{ padding-bottom:8px; margin-bottom:4px; border-bottom:1px dashed var(--linea); }
  table td .boton{ width:100%; margin-top:6px; }
  .caja{ padding:16px; }

  .titulo-pagina h1{ font-size:1.15rem; }
  .tarjetas{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .tarjeta{ padding:12px 14px; }
  .tarjeta .numero{ font-size:1.4rem; }
  .acciones{ grid-template-columns:1fr; }
  .linea-campos > *{ min-width:0; }
  .clave-grande{ font-size:1.2rem; letter-spacing:2px; }
  .alerta .boton{ width:100%; margin-right:0; }
}

@media (max-width:420px){
  .titulo-pagina > div{ display:flex; gap:6px; width:100%; }
  .titulo-pagina > div .boton{ flex:1; }
  .quien span:first-child{ display:none; }   /* el nombre del usuario, para que quepan los enlaces */
}