/* ════════════════════════════════════════════════════════════════════════
   GESTIÓN DE PROVEEDORES
   Lo propio de esta pantalla. Lo demás —cabecera, tarjetas, tabla, buscador—
   viene de clientes.css: es la misma casa y no hay por qué repetirla.
   ════════════════════════════════════════════════════════════════════════ */

.pro-conteo {
    display: block; font-size: 12px; font-weight: 400; opacity: .75; margin-top: 2px;
}

/* La ficha ocupa más que un mapa: la lista se estrecha un poco.

   Y LA ALTURA ES LA DE LA PANTALLA, no la del contenido. La ficha son cinco
   bloques y crece hasta 1.800 px: sin acotarla, quien hacía scroll era la
   página entera y para llegar al final de la ficha se te iba la lista de la
   izquierda. Acotada, cada panel hace el suyo y la lista se queda quieta.

   Las cuentas: 100vh menos la cabecera (60), la barra de abajo (50) y los
   márgenes de arriba y abajo del main (24 + 70). */
.pro-layout {
    grid-template-columns: minmax(320px, 420px) 1fr;
    height: calc(100vh - 60px - 50px - 94px);
    min-height: 420px;
    /* clientes.css pone `align-items: start` para que la tarjeta del mapa no
       se estire. Aquí es al revés: si los paneles se quedan con su altura de
       contenido, la altura de la fila no les afecta y la ficha vuelve a
       medir 1.800 px. Que se estiren hasta llenar la fila. */
    align-items: stretch;
}

.panel-tabla { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.panel-tabla .tabla-scroll { flex: 1; overflow-y: auto; min-height: 0; }

.panel-ficha { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.pro-ficha { overflow-y: auto; padding: 20px 22px 28px; }

/* ── La lista ─────────────────────────────────────────────────────────── */
.pro-fila { cursor: pointer; }
.pro-fila:hover { background: #f8fafc; }
.pro-fila--abierta { background: #eff6ff; box-shadow: inset 3px 0 0 #2563eb; }
.pro-fila td { vertical-align: middle; }
.pro-fila small { display: block; font-size: 11.5px; color: #6b7280; font-weight: 400; }
.pro-codigo { font-variant-numeric: tabular-nums; color: #6b7280; font-size: 12.5px; }

/* La tabla no puede pedir más ancho del que hay: con `fixed` manda lo que
   digan las columnas y el nombre largo se corta con puntos suspensivos, en
   vez de empujar y sacar una barra horizontal. */
.panel-tabla table { table-layout: fixed; width: 100%; }
.pro-col-codigo  { width: 54px; }
.pro-col-cuentas { width: 74px; white-space: nowrap; }
.pro-nombre { min-width: 0; }
.pro-nombre b, .pro-nombre small {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pro-pilula--persona { background: #ede9fe; color: #6d28d9; }

.pro-pilula {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px;
    background: #dbeafe; color: #1d4ed8; font-size: 12px; font-weight: 700;
}
.pro-pilula--vacia { background: #f3f4f6; color: #9ca3af; font-weight: 400; }

.pro-vacio { padding: 26px 16px; text-align: center; color: #9ca3af; font-size: 13.5px; }
.pro-vacio--grande { padding: 80px 20px; font-size: 15px; line-height: 2; }

/* ── La ficha ─────────────────────────────────────────────────────────── */
.pro-cabecera {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.pro-cabecera h2 { font-size: 19px; font-weight: 700; color: #1e3a5f; margin: 0; }
.pro-cabecera small { color: #6b7280; font-size: 12.5px; }
.pro-cabecera-botones { display: flex; gap: 8px; flex-shrink: 0; }

.pro-aviso {
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
    padding: 10px 14px; font-size: 12.5px; color: #1e40af; margin-bottom: 18px;
}

.pro-bloque {
    border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 16px 18px; margin-bottom: 16px;
}
.pro-bloque h3 {
    font-size: 14px; font-weight: 700; color: #374151;
    margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
.pro-bloque h3 small { font-weight: 400; color: #9ca3af; font-size: 12px; }
.pro-bloque h3 i { color: #6b7280; }

/* Lo que no se edita, en gris y sin cajas: se lee, no se toca. */
.pro-bloque--gris { background: #f9fafb; }

.pro-rejilla {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
}

.pro-campo { display: flex; flex-direction: column; gap: 5px; }
.pro-campo--ancho { grid-column: 1 / -1; margin-bottom: 12px; }
.pro-campo > span { font-size: 12.5px; font-weight: 600; color: #4b5563; }
.pro-campo > span small { font-weight: 400; color: #9ca3af; }
.pro-campo input, .pro-campo textarea, .pro-bloque textarea {
    width: 100%; padding: 9px 11px; font-size: 13.5px; font-family: inherit;
    border: 1.5px solid #d1d5db; border-radius: 8px; background: #fff;
    box-sizing: border-box; resize: vertical;
}
.pro-campo input:focus, .pro-bloque textarea:focus {
    outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.pro-pista { display: block; font-size: 12px; color: #6b7280; font-style: normal; margin-top: 4px; }

/* Las cinco personas: número, nombre, teléfono y correo en una línea. */
.pro-persona {
    display: grid; grid-template-columns: 26px 1.2fr 1fr 1.4fr;
    gap: 10px; align-items: end; margin-bottom: 10px;
}
.pro-persona-num {
    width: 24px; height: 24px; border-radius: 50%; background: #f3f4f6;
    color: #6b7280; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; margin-bottom: 9px;
}

/* Los datos de solo lectura */
.pro-datos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 18px;
}
.pro-dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pro-dato span { font-size: 11.5px; color: #9ca3af; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.pro-dato b { font-size: 13px; color: #374151; font-weight: 600; word-break: break-word; }
.pro-dato--vacio { color: #d1d5db !important; font-weight: 400 !important; }

/* El resultado de guardar */
.pro-resultado { padding: 11px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.pro-resultado[hidden] { display: none; }
.pro-resultado--bien  { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.pro-resultado--mal   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.pro-resultado--aviso { background: #fffbeb; color: #b45309; border: 1px solid #fcd34d; }

@media (max-width: 900px) {
    /* En pantalla estrecha se apilan, y ahí la altura fija estorba: que
       manden el contenido y el scroll de la página, como en el resto. */
    .pro-layout { grid-template-columns: 1fr; height: auto; }
    .panel-tabla, .panel-ficha { overflow: visible; }
    .panel-tabla .tabla-scroll { max-height: 50vh; }
    .pro-ficha { overflow: visible; }
    .pro-persona { grid-template-columns: 26px 1fr; }
    .pro-persona .pro-campo:nth-child(3),
    .pro-persona .pro-campo:nth-child(4) { grid-column: 2; }
    .pro-cabecera-botones { width: 100%; }
    .pro-cabecera-botones .ds-btn { flex: 1; justify-content: center; }
}

/* El aviso de la sincronización: arriba y centrado, que es donde se mira
   después de darle a un botón de la cabecera. */
.pro-flotante {
    position: fixed; top: 74px; left: 50%; transform: translateX(-50%);
    z-index: 10000; padding: 12px 20px; border-radius: 10px;
    font-size: 14px; font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    display: flex; align-items: center; gap: 9px;
    max-width: calc(100vw - 32px);
}
.pro-flotante--bien { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.pro-flotante--mal  { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }