/* Reset general para la tabla */
form .anchoCarrito{
	border:none !important;
}

.anchoCarrito {
    width: 100% !important;
    max-width: 900px;
    margin: 10px auto;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    background-color: #fff;
    overflow: hidden;
}

.anchoCarrito .anchoCarrito table.anchoCarrito {
    border-collapse: collapse !important;    
}

/* Estilo para el encabezado */
.titutabla {
    background-color: #156099 !important; /* Un azul más moderno y profundo */
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 600;
    padding: 15px 10px !important;
    border: none !important;
}

/* Estilo para las filas y celdas */
.anchoCarrito tr {
    border-bottom: 1px solid #edf2f7;
    transition: background-color 0.2s ease;
}

table.anchoCarrito tbody tr td .anchoCarrito .anchoCarrito tbody tr:hover {
    background-color: #ebf5ff !important;
}

/* Forzar el fondo antiquewhite a algo más limpio o quitarlo */
tr[style*="background: antiquewhite"] {
    background-color: #ffffff !important;
}

.tabla {
    padding: 15px 10px !important;
    font-size: 14px;
    border: none !important;
	vertical-align: inherit;
}

/* Estilo de la imagen del producto */
.preview img {
    border-radius: 6px;
    border: 1px solid #e2e8f0 !important;
    transition: transform 0.2s;
	width: 100px;
	height: auto;
}

.preview img:hover {
    transform: scale(1.05);
}

/* Input de cantidad */
input[name^="qty_int"] {
    width: 45px !important;
    height: 30px;
    border: 1px solid #cbd5e0 !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 600;
    background-color: #fff !important;
    color: #2d3748;
}

/* Iconos de acción (Añadir, Restar, Borrar) */
.anchoCarrito a span {
    transition: opacity 0.2s;
    display: inline-block;
}

.anchoCarrito a:hover span {
    opacity: 0.7;
    transform: translateY(-1px);
}

/* Filas de totales y descuentos */
.contenido14, .contenido15, .contenido16, 
tr:has(td[colspan="6"]), tr:has(td:contains("Subtotal")) {
    background-color: #fdfdfd;
}

/* Estilo específico para el Total Final */
tr:last-child {
    border-top: 2px solid #1a2a40;
}

tr:last-child b {
    font-size: 18px;
    color: #1a2a40;
}

/* Ajustes para el bloque de código de descuento */
#bonoDescuentoCarrito {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

input#bonodescuento {
    border: 1px solid #cbd5e0;
    padding: 5px;
    border-radius: 4px;
}

/* Responsividad básica: ocultar columnas menos importantes en móvil 
@media (max-width: 600px) {
    .titutabla:nth-child(2), 
    .titutabla:nth-child(3),
    .tabla:nth-child(4), 
    .tabla:nth-child(5) {
        display: none;
    }
}*/

.pcsubtotal{	display:contents; }
.movilsubtotal{ display:none;}

.pctotal{	display:contents; }
.moviltotal{ display:none;}

@media (max-width: 600px) {
    .tabla {
		padding: 15px 10px !important;
		font-size: 12px;
		border: none !important;
		vertical-align: inherit;
	}
	
	.titutabla:nth-child(2), 
    .titutabla:nth-child(3),
    .tabla:nth-child(3), 
    .tabla:nth-child(4) {
        display: none;
    }
	
	.pcsubtotal{	display:none; }
	.movilsubtotal{ display:contents;}
	.moviltabla div{ width:150px;}
	
	.pctotal{	display:none; }
	.moviltotal{ display:contents;}
}



/* ESTILO SEGURO: Solo afecta a la tabla que tiene el ID #datosdeenvio 
   como descendiente directo (celda > fila > tabla)
*/

/* 1. La tabla contenedora: aplicamos bordes y sombra solo a la tabla del formulario */
table:has(> tr > #datosdeenvio), 
table:has(> tbody > tr > #datosdeenvio) {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    margin: 0px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    width: 100% !important;
}

/* 2. Estilo para la celda del título (DATOS DE ENVÍO) */
#datosdeenvio {
    padding: 15px 20px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    /* El color #156099 ya lo tienes en el HTML, aquí le damos espacio */
}

/* 3. Estilo para todas las celdas de ESTA tabla específica */
table:has(> tr > #datosdeenvio) td, 
table:has(> tbody > tr > #datosdeenvio) td {
    padding: 12px 0px !important;
    border-bottom: 1px solid #eeeeee !important;
    font-family: inherit !important;
	font-size:12pt;
}

/* 4. Estilo para las etiquetas (clase tablabold de la columna izquierda) */
table:has(> tr > #datosdeenvio) td.tablabold:not(#datosdeenvio), 
table:has(> tbody > tr > #datosdeenvio) td.tablabold:not(#datosdeenvio) {
    width: 30% !important;
    font-weight: 600 !important;
    color: #fff;
}

/* 5. Estilo para los campos de texto y selects dentro de esta tabla */
table:has(> tr > #datosdeenvio) input[type="text"], 
table:has(> tr > #datosdeenvio) select,
table:has(> tbody > tr > #datosdeenvio) input[type="text"],
table:has(> tbody > tr > #datosdeenvio) select {
    width: 100% !important;
    padding: 8px 10px !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}

/* 6. Efecto al hacer clic en los campos */
table:has(> tr > #datosdeenvio) input:focus,
table:has(> tbody > tr > #datosdeenvio) input:focus {
    border-color: #156099 !important;
    outline: none !important;
    box-shadow: 0 0 4px rgba(21, 96, 153, 0.2) !important;
}

/* 7. Eliminar el borde de la última fila para que no choque con el redondeado */
table:has(> tr > #datosdeenvio) tr:last-child td, 
table:has(> tbody > tr > #datosdeenvio) tr:last-child td {
    border-bottom: none !important;
}


td.tabla table td.tabla{
	color:#000;
}

.tablabold span{
	color:#fff !important;
}

.tablabold span i{
	color:#156099 !important;
}

.tablabold{
	background-color:#fff;
	color:#000 !important;
}

#mododeenvio, #mododepago{
	background-color:#efefef;
}

td.tabla table tr td.tablabold{
	background-color:#efefef;
}

td.tabla table tr td.tabla textarea.form2{
	width:100%;
	resize:none;
	height:150px;
	
}