body {
    background-color: #EFDFCC;
}
.h1 {
    display: flex;
    justify-content: center;
    color: black;
    padding: 30px;
}
.small {
    display: flex;
    justify-content: center;
    padding: 30px;
}
.barra-navegacion {
    background-color: #D7A184;
}
.items-nav {
    text-decoration: none;
    color: black;
    font-weight: 500;
    padding: 14px 32px;
    display: block;
    border-right: 1px solid rgba(0,0,0,0.15);
    transition: background-color 0.2s, color 0.2s;
}
.items-nav:hover {
    background-color: #BA8E7A;
    color: beige;
}
.items-nav:last-child { border-right: none; }
.header {
    border-bottom: 4px solid orange;
}
.botones-categorias {
    border-radius: 10px;
    background-color: #66796B;
    color: white;
    text-decoration: none;
    padding: 10px;
    transition: ease 0.3s;
}
.botones-categorias:hover {
    border-radius: 10px;
    background-color: #66796B;
    color: black;
    text-decoration: none;
    padding: 10px;
    transform: scale(1.1);
}
.imagenes-cards { object-fit: cover; }
.cartitas { transition: ease 0.5s; }
.cartitas:hover { transform: scale(1.05); }
.carrusel { height: 350px; }
.carrusel-ancho { max-width: 1500px; }
.breadcrumb-items { text-decoration: none; color: orange; }
.botones-compra {
    border-radius: 10px;
    background-color: #66796B;
    color: white;
    text-decoration: none;
    padding: 10px;
}
.botones-compra:hover {
    border-radius: 10px;
    background-color: #38b95b;
    color: black;
    text-decoration: none;
    padding: 10px;
}
.perfil-container { max-width: 700px; margin: 40px auto; }
.perfil-card {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.perfil-card input { max-width: 100%; }
.perfil-card button { width: 100%; }

/* ── Botón Administrar en nav ──────────────────────────────── */
.items-nav--admin {
  
    color: white !important;
    font-weight: 600;
    letter-spacing: .02em;
}
.items-nav--admin:hover {
  
    color: white !important;
}

/* ═══════════════════════════════════════════════════════════
   ADMIN — tabla estilo excel SIN SCROLL HORIZONTAL
   ═══════════════════════════════════════════════════════════ */

.admin-tabla-wrap {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    overflow: hidden;          /* sin scroll */
    width: 100%;
}

/* Tabla ocupa todo el ancho disponible */
.tabla-admin {
    table-layout: fixed;       /* columnas respetan los anchos definidos */
    width: 100%;
    border-collapse: collapse;
    font-size: .75rem;
}

/* Cabeceras */
.tabla-admin thead th {
    background-color: #D7A184;
    color: white;
    font-weight: 600;
    font-size: .7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: none;
    padding: 8px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Celdas */
.tabla-admin tbody td {
    padding: 5px 5px;
    vertical-align: middle;
    border-bottom: 1px solid #F3EBE3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tabla-admin tbody tr:last-child td { border-bottom: none; }
.tabla-admin tbody tr:hover { background-color: #FDF6F0; }

/* Imagen estandarizada - MISMO TAMAÑO */
.admin-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #E8DDD4;
    display: block;
    flex-shrink: 0;
}

/* Fila nueva */
.fila-nueva td {
    background-color: #FDFAF6;
    border-bottom: 2px solid #D7A184 !important;
    white-space: normal;        /* los inputs necesitan wrapping */
    overflow: visible;
}
.fila-nueva:hover td { background-color: #FAF4EE !important; }

/* Separador punteado */
.fila-separador td {
    padding: 0;
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        #D7A184 0px, #D7A184 8px,
        transparent 8px, transparent 16px
    );
    border: none !important;
}

/* Fila en edición */
.fila-editando td {
    background-color: rgba(102,121,107,0.07) !important;
    outline: 2px solid #66796B;
    outline-offset: -2px;
}

/* Inputs dentro de la tabla — clase corta .ai */
.ai {
    width: 100%;
    font-size: .72rem !important;
    padding: 3px 5px !important;
    border: 1px solid #E0CFC0;
    border-radius: 4px;
    background: #FDFAF6;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.3;
}
.ai:focus {
    outline: none;
    border-color: #D7A184;
    box-shadow: 0 0 0 2px rgba(215,161,132,0.25);
    background: #fff;
}
textarea.ai { resize: none; height: 48px; }
select.ai   { appearance: auto; }

/* Columnas de texto — permiten wrap suave */
.col-nombre, .col-texto {
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}
.col-id     { color: #aaa; font-size: .7rem; }
.col-precio { font-weight: 600; color: #66796B; white-space: nowrap; }

/* Código */
.admin-codigo {
    background: #F5EDE3;
    border: 1px solid #E0CFC0;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: .68rem;
    color: #66796B;
    font-family: monospace;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badge categoría */
.admin-categoria {
    background: #EAF0EB;
    color: #4f5e53;
    border-radius: 20px;
    padding: 1px 7px;
    font-size: .68rem;
    font-weight: 500;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón guardar */
.admin-btn-guardar {
    background-color: #66796B;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: .68rem;
    padding: 4px 7px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s;
    width: 100%;
    text-align: center;
}
.admin-btn-guardar:hover { background-color: #4f5e53; }

/* Botón cancelar */
.admin-btn-cancelar {
    display: block;
    text-align: center;
    font-size: .68rem;
    padding: 3px 7px;
    border-radius: 5px;
    border: 1px solid #ccc;
    color: #555;
    text-decoration: none;
    background: #f5f5f5;
    transition: background 0.2s;
}
.admin-btn-cancelar:hover { background: #eee; }

/* Botones editar / eliminar */
.admin-btn-editar, .admin-btn-eliminar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    font-size: .8rem;
    text-decoration: none;
    transition: transform 0.1s, background 0.2s;
    flex-shrink: 0;
}
.admin-btn-editar {
    background-color: #D7A184;
    border: none;
    color: white;
}
.admin-btn-editar:hover  { background-color: #BA8E7A; transform: translateY(-1px); }
.admin-btn-eliminar {
    background-color: #f5e8e8;
    border: 1px solid #e0c0c0;
    color: #a94442;
}
.admin-btn-eliminar:hover { background-color: #f0c8c8; transform: translateY(-1px); }

/* Buscador */
.admin-buscador-wrap {
    background: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    display: inline-block;
}
.admin-buscador-input {
    width: 260px;
    border-color: #E0CFC0;
    font-size: .8rem;
}
.admin-buscador-input:focus {
    border-color: #D7A184;
    box-shadow: 0 0 0 2px rgba(215,161,132,0.25);
}

/* ──────────────────────────────────────────────────────────────
   TARJETAS DEL INDEX - Tamaño uniforme sin deformaciones
   ────────────────────────────────────────────────────────────── */

/* Contenedor de fila para cards uniformes */
.row.align-items-stretch {
    display: flex;
    flex-wrap: wrap;
}

/* Cada columna tendrá altura igual */
.row.align-items-stretch > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

/* Card con altura completa y estructura fija */
.card.cartitas {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    transition: ease 0.5s;
}

/* Contenedor de imagen: tamaño fijo para todas */
.card.cartitas .img-fluid.imagenes-cards {
    width: 100%;
    height: 220px;          /* Altura fija para todas las imágenes */
    object-fit: cover;      /* La imagen cubre el espacio sin deformarse */
    object-position: center; /* Centra la imagen */
    border-radius: 8px 8px 0 0;
}

/* Cuerpo de la card: ocupa el espacio restante y alinea botón abajo */
.card.cartitas .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

/* Título: evita saltos de línea no deseados */
.card.cartitas .card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.4rem;
}

/* Texto promocional: altura limitada */
.card.cartitas .card-text {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.5rem;
}

/* Botón: se mantiene al fondo */
.card.cartitas .btn.botones-categorias {
    margin-top: auto;
    align-self: flex-start;
    font-size: 0.8rem;
    padding: 6px 12px;
}