/* ============================================================
   estilos-tablero.css - Repuestos MCHB (pagina de novedades)
   ============================================================ */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --azul:       #0d2d6b;
      --azul-medio: #1a4099;
      --azul-claro: #e8eef8;
      --rojo:       #c0181f;
      --rosa:       #fce8ee;
      --rosa-borde: #e8b0c0;
      --blanco:     #ffffff;
      --gris:       #f5f5f5;
      --gris-texto: #4a4a4a;
      --gris-borde: #d8d8d8;
      --verde:      #1a7a3c;
      --verde-bg:   #e8f5ee;
      --naranja:    #b85a00;
      --naranja-bg: #fff3e0;
    }
    html { scroll-behavior: smooth; }
    body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--gris); color: #1a1a1a; line-height: 1.5; }

    /* NAV */
    nav { background: var(--azul); border-bottom: 3px solid var(--rojo); }
    .nav-inner { max-width: 960px; margin: 0 auto; padding: 0 1.25rem; display: flex; align-items: center; justify-content: space-between; height: 56px; }
    .nav-logo { font-size: 1.2rem; font-weight: 700; color: var(--blanco); text-decoration: none; }
    .nav-logo span { color: var(--rosa-borde); }
    .nav-back { font-size: 0.85rem; color: rgba(255,255,255,0.7); text-decoration: none; }
    .nav-back:hover { color: var(--blanco); }

    /* HEADER */
    .page-header { background: var(--azul); color: var(--blanco); padding: 2.5rem 1.25rem 2rem; text-align: center; }
    .page-header h1 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin-bottom: 0.4rem; }
    .page-header p { font-size: 0.9rem; color: rgba(255,255,255,0.7); }
    .header-wave { background: var(--azul); height: 30px; clip-path: ellipse(55% 100% at 50% 0%); background: var(--gris); margin-top: -1px; }

    /* MAIN */
    main { max-width: 960px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

    /* ANUNCIOS PÚBLICOS */
    .section-label {
      font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--rojo); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;
    }
    .section-label::after { content: ''; flex: 1; height: 1px; background: var(--gris-borde); }

    #lista-anuncios { display: flex; flex-direction: column; gap: 0.75rem; }

    .anuncio {
      background: var(--blanco);
      border: 1px solid var(--gris-borde);
      border-left: 4px solid var(--azul-medio);
      border-radius: 0 10px 10px 0;
      padding: 1rem 1.25rem;
      display: flex; flex-direction: column; gap: 0.35rem;
      animation: slideIn 0.3s ease;
    }
    @keyframes slideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
    .anuncio.reciente { border-left-color: var(--verde); }
    .anuncio.agotado { border-left-color: var(--gris-borde); opacity: 0.6; }

    .anuncio-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
    .anuncio-fecha { font-size: 0.75rem; color: var(--gris-texto); }
    .badge {
      font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 20px;
      letter-spacing: 0.5px; text-transform: uppercase;
    }
    .badge-nuevo { background: var(--verde-bg); color: var(--verde); }
    .badge-limitado { background: var(--naranja-bg); color: var(--naranja); }
    .badge-agotado { background: var(--gris); color: var(--gris-texto); }

    .anuncio-texto { font-size: 0.97rem; color: #1a1a1a; font-weight: 500; }
    .anuncio-nota { font-size: 0.82rem; color: var(--gris-texto); font-style: italic; }

    .anuncio-aplicacion {
      display: inline-block; align-self: flex-start;
      font-size: 0.82rem; font-weight: 600; color: var(--azul-medio);
      background: var(--azul-claro); border-radius: 6px;
      padding: 4px 10px; margin: 2px 0;
    }
    .anuncio-aplicacion strong { color: var(--azul); }

    .wa-consultar {
      display: inline-flex; align-items: center; gap: 0.4rem;
      margin-top: 0.4rem; background: #25d366; color: var(--blanco);
      font-size: 0.8rem; font-weight: 600; padding: 5px 12px; border-radius: 20px;
      text-decoration: none; width: fit-content;
      transition: background 0.2s;
    }
    .wa-consultar:hover { background: #1da851; }

    .vacio {
      text-align: center; padding: 3rem 1rem;
      color: var(--gris-texto); font-size: 0.9rem;
    }
    .vacio-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }

    /* SEPARADOR ADMIN */
    .admin-sep { margin: 2.5rem 0 1.5rem; border: none; border-top: 2px dashed var(--gris-borde); }

    /* PANEL ADMIN */
    #panel-login, #panel-admin { display: none; }
    #panel-login.visible, #panel-admin.visible { display: block; }

    .admin-card {
      background: var(--blanco); border: 1px solid var(--gris-borde);
      border-radius: 12px; padding: 1.5rem; max-width: 560px; margin: 0 auto;
    }
    .admin-card h2 { font-size: 1rem; color: var(--azul); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; }

    label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--gris-texto); margin-bottom: 4px; margin-top: 0.9rem; }
    label:first-of-type { margin-top: 0; }
    input[type="text"], input[type="password"], textarea, select {
      width: 100%; padding: 0.6rem 0.75rem; font-size: 0.92rem;
      border: 1px solid var(--gris-borde); border-radius: 8px;
      font-family: inherit; transition: border-color 0.2s;
      background: var(--blanco); color: #1a1a1a;
    }
    input:focus, textarea:focus, select:focus { outline: none; border-color: var(--azul-medio); }
    textarea { resize: vertical; min-height: 80px; }

    .btn { display: inline-block; padding: 0.65rem 1.5rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: none; font-family: inherit; transition: background 0.2s, transform 0.15s; }
    .btn:hover { transform: translateY(-1px); }
    .btn-azul { background: var(--azul); color: var(--blanco); }
    .btn-azul:hover { background: var(--azul-medio); }
    .btn-rojo { background: var(--rojo); color: var(--blanco); }
    .btn-rojo:hover { background: #9e1015; }
    .btn-gris { background: var(--gris-borde); color: var(--gris-texto); }

    .btn-row { display: flex; gap: 0.75rem; margin-top: 1.25rem; flex-wrap: wrap; }

    .admin-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
    .admin-item {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
      background: var(--gris); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.88rem;
    }
    .admin-item-text { flex: 1; }
    .admin-item-fecha { font-size: 0.75rem; color: var(--gris-texto); margin-bottom: 2px; }
    .admin-item-body { color: #1a1a1a; }
    .btn-eliminar {
      background: none; border: none; color: var(--rojo); cursor: pointer;
      font-size: 1rem; padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
      transition: background 0.15s;
    }
    .btn-eliminar:hover { background: var(--rosa); }

    .msg-error { font-size: 0.82rem; color: var(--rojo); margin-top: 0.5rem; }
    .msg-ok { font-size: 0.82rem; color: var(--verde); margin-top: 0.5rem; }

    /* WA FLOTANTE */
    .wa-float {
      position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 200;
      background: #25d366; color: var(--blanco); border-radius: 50px;
      padding: 0.7rem 1.1rem; display: flex; align-items: center; gap: 0.5rem;
      text-decoration: none; font-weight: 600; font-size: 0.88rem;
      box-shadow: 0 4px 16px rgba(37,211,102,0.4);
    }

    @media (max-width: 600px) {
      .admin-item { flex-direction: column; }
    }

    /* ── BUSCADOR DE INVENTARIO ── */
    .buscador-wrap {
      background: var(--blanco); border: 1px solid var(--gris-borde);
      border-radius: 12px; padding: 1.25rem; margin-bottom: 2rem;
    }
    .buscador-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--azul); margin-bottom: 0.6rem; }
    .buscador-input {
      width: 100%; padding: 0.75rem 1rem; font-size: 1rem;
      border: 1px solid var(--gris-borde); border-radius: 8px;
      font-family: inherit; background: var(--blanco); color: #1a1a1a;
    }
    .buscador-input:focus { outline: none; border-color: var(--azul-medio); }
    .buscador-resultado {
      margin-top: 0.85rem; padding: 0.85rem 1rem; border-radius: 8px;
      font-size: 0.9rem; line-height: 1.5;
    }
    .buscador-resultado.si { background: var(--verde-bg); color: #14552b; }
    .buscador-resultado.no { background: var(--naranja-bg); color: #7a3d00; }
    .buscador-resultado a { color: inherit; font-weight: 700; text-decoration: underline; }

    /* Que el anclaje de un anuncio no quede tapado por el nav sticky */
    .anuncio { scroll-margin-top: 75px; }

    .wa-consultar-agotado { background: #7a7a7a; }
    .wa-consultar-agotado:hover { background: #5f5f5f; }