/*Theme Name: P10s
Theme URI: www.gpuon.mx
Author: gPuon
Description: Tema creado para Sta. Mónica Pastelería
*/

/* ---------------------------------------------------------------------------------------------------------------------------
LIMPIAMOS LOS ESTILOS
-------------------------------------------------------------------------------------------------------------------------------    
http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126 / License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }    
a { text-decoration:none; }
input, select, textarea, button { 
    font-size:large; outline:none !important; background:transparent; margin:0; border:0; 
    -webkit-appearance:none; -moz-appearance:none !important; }
/* -------------------------------------------------------------------------------------------------------------------------------- */ 



/* ESTILOS GENERALES
------------------------------------------------------------------------------------------------------------------------------------------------------*/
html { font-family:Helvetica; font-size:100%; text-align:left; color:#2e241e; }
img { width:100%; height:auto; color: rgba(170,170,170,1.00) }

/* ---------------------------------------------------------------------------------------------------------------------------
DEFINIMOS LOS COLORES A USAR EN LA HOJA DE ESTILO
-------------------------------------------------------------------------------------------------------------------------------    */
:root {
    --color_principal:#6C8277;
    --color_principal_ochenta:rgba(108,130,119,0.75);
    --color_principal_cincuenta:rgba(108,130,119,0.4);
    --color_principal_diez:rgba(108,130,119,0.1);

    --color_oscuro:#000;
    --color_oscuro_diez:rgba(0,0,0,0.1);
    --color_oscuro_treinta:rgba(0,0,0,0.3);
    --color_oscuro_cincuenta:rgba(0,0,0,0.5);
    --color_oscuro_setenta:rgba(0,0,0,0.7);

    --color_claro:#fff;
    --color_claro_ochenta:rgba(255,255,255,0.8);
    --color_claro_cuarenta:rgba(255,255,255,0.4);
    --color_claro_diez:rgba(255,255,255,0.1);

    --color_detalles:#E58672;
    --color_detalles_ochenta:rgba(229,134,114,0.8);
    --color_detalles_cincuenta:rgba(229,134,114,0.5);
    --color_detalles_veinte:rgba(229,134,114,0.2);

    --color_tres:#C7B299;
    --color_tres_75:rgba(199,178,153,0.75);

    --color_cuatro:rgba(89,104,65,1);
	--color_cuatro_75:rgba(89,104,65,0.75);
}


/* ANCHO DE COLUMNAS
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.c100 { width:100%; } .c90 { width:90%; } .c80 { width:80%; } .c70 { width:70%; } .c60 { width:60%; }
.c50 { width:50%; } .c40 { width:40%; } .c30 { width:30%; } .c20 { width:20%; } .c10 { width:10%; }
.c100, .c90, .c80, .c70, .c60, .c50, .c40, .c30, .c20, .c10 { display:inline-block; vertical-align:top; }

.c100p { width:98%; } .c90p { width:88%; } .c80p { width:78%; } .c70p { width:68%; } .c60p { width:58%; }
.c50p { width:48%; } .c40p { width:38%; } .c30p { width:28%; } .c20p { width:18%; } .c10p { width:8%; }
.c100p, .c90p, .c80p, .c70p, .c60p, .c50p, .c40p, .c30p, .c20p, .c10p { display:inline-block; vertical-align:top; padding:0.5rem 1%;}

.c100p2 { width:92%; } .c90p2 { width:82%; } .c80p2 { width:72%; } .c70p2 { width:62%; } .c60p2 { width:52%; }
.c50p2 { width:42%; } .c40p2 { width:32%; } .c30p2 { width:22%; } .c20p2 { width:12%; } .c10p2 { width:2%; }
.c100p2, .c90p2, .c80p2, .c70p2, .c60p2, .c50p2, .c40p2, .c30p2, .c20p2, .c10p2 { display:inline-block; vertical-align:top; padding:1rem 4%;}


/* MARGEN DE COLUMNAS
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.m1r { margin:1rem auto;} .m2r { margin:2rem auto;} .m3r { margin:3rem auto;} .m4r { margin:4rem auto;} .m5r { margin:5rem auto;}
.m1p { margin:1px auto;} .m2p { margin:2px auto;} .m3p { margin:3px auto;} .m4p { margin:4px auto;} .m5p { margin:5px auto;}

.m10v { margin:10% auto;}
.m20v { margin:20% auto;}
.m30v { margin:30% auto;}
.m40v { margin:40% auto;}
.m50v { margin:50% auto;}

.v100 { min-height:100vh; } .v100h { min-height:100%; }
.vh100p { height:100px; } .vh200p { height:200px; } .vh300p { height:300px; }

.sticky { position:sticky; top:0; }


/* COLORES DE FONDO
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.bg_p { background:var(--color_principal);}
.bg_p1 { background:var(--color_principal_ochenta);}
.bg_p2 { background:var(--color_principal_cincuenta);}
.bg_p3 { background:var(--color_principal_diez);}

.bg_d { background:var(--color_detalles);}
.bg_d2 { background:var(--color_detalles_ochenta);}

.bg_c { background:var(--color_claro); }
.bg_c1 { background:var(--color_claro_ochenta); }
.bg_c2 { background:var(--color_claro_cuarenta); }
.bg_c3 { background:var(--color_claro_diez); }

.bg_o { background:var(--color_oscuro);}
.bg_o1 { background:var(--color_oscuro_setenta);}
.bg_o2 { background:var(--color_oscuro_cincuenta);}
.bg_o3 { background:var(--color_oscuro_treinta);}
.bg_o4 { background:var(--color_oscuro_diez);}

.bg_3 { background:var(--color_tres);}
.bg_31 { background:var(--color_tres_75);}

.bg_r { background:#c1272d;}
.bg_r1 { background:rgba(193,39,45,.7);}
.bg_r2 { background:rgba(193,39,45,.3);}


/* EL TEXTO
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.centrar { text-align:center !important; } .izq { text-align:left; } .der { text-align:right; }
.negrita { font-weight:bold; } .cursiva { font-style:italic; }
.lh1 { line-height:1rem; } .lh125 { line-height:1.25rem; } .lh15 { line-height:1.5rem; } .lh2 { line-height:2rem; } .lh3 { line-height:3rem !important; }
.txt_p { color:var(--color_principal); } .txt_d { color:var(--color_detalles); } .txt_p { color:var(--color_claro); }

/* VERSION GRID
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.grid { display:inline-grid; grid-template:auto 200px / auto; }

.grid_2c { display:grid; grid-template:auto / 1fr 1fr; gap:1rem; }
.grid_2c2080 { display:grid; grid-template:auto / 2fr 8fr; gap:1rem; }
.grid_2c3070 { display:grid; grid-template:auto / 3fr 7fr; gap:1rem; }
.grid_2c4060 { display:grid; grid-template:auto / 4fr 6fr; gap:1rem; }
.grid_2c8020 { display:grid; grid-template:auto / 8fr 2fr; gap:1rem; }
.grid_2c7030 { display:grid; grid-template:auto / 7fr 3fr; gap:1rem; }
.grid_2c6040 { display:grid; grid-template:auto / 6fr 4fr; gap:1rem; }

.grid_3c { display:grid; grid-template:auto / 1fr 1fr 1fr; gap:1rem; }
.grid_4c { display:grid; grid-template:auto / 1fr 1fr 1fr 1fr; gap:1rem; }
.grid_5c { display:grid; grid-template:auto / 1fr 1fr 1fr 1fr 1fr; gap:1rem; }

/* PADDING
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.pd5 { padding:5px; } .pd10 { padding:10px; }

.clip { width:100%; object-fit:cover; }
.enmascarar { width:100%; margin-bottom:1rem; overflow-x:auto; }
.dblock { display:block; } .diblock { display:inline-block; }



/* ESTILO PARA TITULOS
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.t1p, .t1d, .t1c, .t1o { font-size:xx-large; font-weight:lighter; line-height:5rem; margin:0 auto 0.5rem auto; }
.t1p { background:var(--color_principal); color:var(--color_claro); }
.t1d { background:var(--color_detalles); color:var(--color_claro); }
.t1c { background:var(--color_claro); color:var(--color_oscuro); }
.t1o { background:var(--color_oscuro); color:var(--color_claro); }

.t2p, .t2d, .t2c, .t2o { font-size:large; font-weight:lighter; line-height:3rem; margin:0 auto 0.5rem auto; }
.t2p { background:var(--color_principal); color:var(--color_claro); }
.t2d { background:var(--color_detalles); color:var(--color_claro); }
.t2c { background:var(--color_claro); color:var(--color_oscuro); }
.t2o { background:var(--color_oscuro); color:var(--color_claro); }

.t3p, .t3d, .t3c, .t3o { 
    width:70%; font-size:x-large; font-weight:lighter; line-height:4rem; margin:0 auto 1rem auto; box-shadow: rgba(0,0,0,0.45) 0px 15px 20px -20px; }
.t3p { border-bottom:1px dotted var(--color_principal); color:var(--color_principal); }
.t3d { border-bottom:1px dotted var(--color_detalles); color:var(--color_detalles); }
.t3c { border-bottom:1px dotted var(--color_claro); color:var(--color_claro); }
.t3o { border-bottom:1px dotted var(--color_oscuro); color:var(--color_oscuro); }

.t4p, .t4d, .t4c, .t4o { font-size:xx-large; font-weight:bolder; margin:1rem auto; }
.t4p { color:var(--color_principal); }
.t4d { color:var(--color_detalles); }
.t4c { color:var(--color_claro); }
.t4o { color:var(--color_oscuro); }

.t5p, .t5d, .t5c, .t5o { font-size:large; font-weight:bolder; margin:1rem auto; }
.t5p { color:var(--color_principal); }
.t5d { color:var(--color_detalles); }
.t5c { color:var(--color_claro); }
.t5o { color:var(--color_oscuro); }


/* FORMULARIOS 
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.campo { 
    width:100%; position:relative; vertical-align:top; margin-bottom:4px; background:var(--color_principal_diez); }
.campo label { line-height:2.5rem; font-size:small; font-weight:bold; color:var(--color_principal); text-align:right; }
.campo input, .campo textarea, .campo .ld { 
    line-height:2.5rem; background:var(--color_claro_ochenta); color:#2e241e; text-align:left; font-size:medium; }
.campo textarea { font-family:Helvetica; line-height:1.5rem; }
.campo .ld select { 
    width:100%; line-height:2rem; margin:0; padding:0; border:0; font-size:large; }
.campo .ld span { 
    width:2rem; height:2rem; display:block; position:absolute; top:0.6rem; right:1rem; 
    background:url(../images/fx-flecha_abajo.png) bottom; background-size:cover; }
.campo .ld:hover span { background-position:top; }
input:focus, textarea:focus { box-shadow:inset 3px 0 6px 0 rgba(0,0,0,.2); }
input[type="checkbox"] { box-shadow: inset 1em 1em #fff !important; border:3px solid #333; line-height:1.5rem !important; }
input[type="checkbox"]:checked { box-shadow: inset 1em 1em #ec657f !important; border:4px solid #fff; }
.campo input:disabled { color:var(--color_oscuro); }
.btn_form { display:inline-block; }



/* BOTONES 
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.btn1_p, .btn1_d, .btn1_c, .btn1_o, .btn1_3 { 
    padding:1rem 0; font-size:large; text-transform:uppercase; text-align:center; line-height:2rem; margin:0.75rem 0; }
.btn1_p { background:var(--color_principal); color:#fff; }
.btn1_d { background:var(--color_detalles); color:#fff; }
.btn1_c { background:var(--color_claro); color:#000; }
.btn1_o { background:var(--color_oscuro); color:#fff; }
.btn1_3 { background:var(--color_tres); color:#fff; }
.btn1_p:hover, .btn1_d:hover, .btn1_c:hover, .btn1_o:hover, .btn1_3:hover { cursor:pointer; font-weight:bold; background:var(--color_tres); }

.btn2_p, .btn2_d, .btn2_c, .btn2_o, .btn2_r, .btn2_3 { 
    padding:0.5rem 0; background:transparent; text-transform:uppercase; font-size:small; text-align:center; margin:0.75rem 0; }
.btn2_p { border:1px dashed var(--color_principal); color:var(--color_principal); }
.btn2_d { border:1px dashed var(--color_detalles); color:var(--color_detalles); }
.btn2_c { border:1px dashed var(--color_claro); color:var(--color_claro); }
.btn2_o { border:1px dashed var(--color_oscuro); color:var(--color_oscuro); }
.btn2_r { border:1px dashed darkred; color:darkred; }
.btn2_3 { border:1px dashed var(--color_tres); color:var(--color_tres);}
.btn2_p:hover, .btn2_d:hover, .btn2_o:hover, .btn2_r:hover, .btn2_3:hover { color:var(--color_claro); cursor:pointer; }
.btn2_p:hover { background:var(--color_principal); }
.btn2_d:hover { background:var(--color_detalles); }
.btn2_c:hover { background:var(--color_claro); cursor:pointer; color:var(--color_principal); }
.btn2_o:hover { background:var(--color_oscuro); }
.btn2_r:hover { background:darkred; }
.btn2_3:hover { background:var(--color_tres); }

.btn3_p, .btn3_d, .btn3_c, .btn3_o, .btn3_3 { font-size:small; }
.btn3_p { color:var(--color_principal); }
.btn3_d { color:var(--color_detalles); }
.btn3_c { color:var(--color_claro); }
.btn3_o { color:var(--color_oscuro); }
.btn3_3 { color:var(--color_tres); }
.btn3_p:hover, .btn3_d:hover, .btn3_c:hover, .btn3_o:hover, .btn3_3:hover { 
    cursor:pointer; color:var(--color_oscuro); font-weight:bold; }

.btn4_p, .btn4_d, .btn4_c, .btn4_o, .btn4_3 { 
    font-size:small; text-transform:uppercase; text-align:center; line-height:2rem; }
.btn4_p { background:var(--color_principal); color:#fff; }
.btn4_d { background:var(--color_detalles); color:#fff; }
.btn4_c { background:var(--color_claro); color:#000; }
.btn4_o { background:var(--color_oscuro); color:#fff; }
.btn4_3 { background:var(--color_tres); color:#fff; }
.btn4_p:hover, .btn4_d:hover, .btn4_c:hover, .btn4_o:hover, .btn4_3:hover { 
    cursor:pointer; font-weight:bold; background:var(--color_tres); }

.btn5_p, .btn5_d, .btn5_c, .btn5_o, .btn5_3 { 
    font-size:small; text-align:center; padding:5px 10px; border-radius:10px; display:inline-block; line-height:1rem; }
.btn5_p { background:var(--color_principal); color:#fff; }
.btn5_d { background:var(--color_detalles); color:#fff; }
.btn5_c { background:var(--color_claro); color:#000; }
.btn5_o { background:var(--color_oscuro); color:#fff; }
.btn5_3 { background:var(--color_tres); color:#fff; }
.btn5_p:hover, .btn5_d:hover, .btn5_c:hover, .btn5_o:hover, .btn5_3:hover { 
    cursor:pointer; font-weight:bold; background:var(--color_tres); }

.btn_buscar { 
    width:25%; text-align:center; line-height:1.5rem; position:absolute; right:8px; top:8px; padding:0;
    background:#2e241e !important; color:#fff !important; text-align:center !important; }
.btn_buscar:hover { cursor:pointer; width:28%; }
.error { width:100%; display:block; text-align:center; color:darkred; font-size:small; line-height:1rem; margin-bottom:0.5rem; }


/* TABLAS 
------------------------------------------------------------------------------------------------------------------------------------------------------*/
table { width:100%; border-collapse:separate; border-spacing:0 4px; }
td { text-align:left; padding:1rem; line-height:1.4rem; vertical-align:bottom; }

.tencabezado tr { background:var(--color_detalles_ochenta); color:#fff; font-size:small; font-weight:bold; }
.tcontenido tr:nth-child(odd) { background:var(--color_claro_ochenta); }
.tcontenido tr:nth-child(even) { background:var(--color_claro_ochenta); }
.tcontenido td { border-bottom:1px dotted var(--color_principal); }

.teaside tr { background:var(--color_oscuro_cincuenta); color:#fff; font-size:small; font-weight:bold; }
.tcaside tr:nth-child(odd) { background:var(--color_principal_diez); }
.tcaside tr:nth-child(even) { background:var(--color_principal_cincuenta); }

.td_sesenta { min-width:60%; }
.td_cincuenta { min-width:50%; }
.td_cuarenta { min-width:40%; }
.td_treinta { min-width:30%; }
.td_veinte { min-width:20%; }
.td_diez { min-width:10%; }
.td_acciones { text-align:right; }
.td_acciones a, .td_acciones input { 
    width:1.6rem; height:1.6rem; line-height:1.6rem; margin:0 1px; border-radius:0.8rem; display:inline-block;
    font-size:small; text-align:center; color:#fff; background:#ccc; }

.aprincipal:hover { background:var(--color_principal); cursor:pointer; }
.adetalles:hover { background:var(--color_detalles); cursor:pointer; }
.amenta:hover { background:#5ea1a0; cursor:pointer; }
.aazul:hover { background:#009bdb; cursor:pointer; }
.averde:hover { background:#596841; cursor:pointer; }
.arojo:hover { background:#c1272d; cursor:pointer; }
.aoscuro:hover { background:var(--color_oscuro_setenta); cursor:pointer; }
.agris:hover { background:#666; cursor:pointer; }


/*  CONTENIDO
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.contenido { 
    width:64%; min-height:100vh; padding:2rem 3% 30vh 3%; position:relative; display:inline-block; vertical-align:top; }
.contenido h1 { position:sticky; z-index:1; top:0; }    
.contenido .subtitulo { 
    width:94%; padding:1.5rem 3%; margin-bottom:0.5rem; background:var(--color_principal); 
    box-shadow: inset 0 0 0 8px rgba(255,255,255,0.3);
    color:var(--color_claro); font-size:large; }
.subtitulo a { 
    width:1rem; height:1rem; line-height:1rem; padding:6px; display:inline-block;
    font-size:large; text-align:center; color:#fff; }
.subtitulo a:hover { background:#000; cursor:pointer; }


/*  PAGINACION
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.pagination { text-align:center; }
.pagination li { display:inline-block; }
.pagination a { 
    min-width:1rem; min-height:1rem; line-height:1rem; padding:8px; display:inline-block;
    font-size:small; text-align:center; color:#fff; background:var(--color_principal); border:1px solid var(--color_principal); 
}
.pagination a:hover { cursor:pointer; background:#999; border:1px solid #999; } 
.pagination .disabled { 
    min-width:1rem; min-height:1rem; line-height:1rem; padding:8px; display:inline-block;
    font-size:small; text-align:center; color:var(--color_principal); border:1px solid var(--color_principal); 
}



/* ASIDE 
------------------------------------------------------------------------------------------------------------------------------------------------------*/
aside { 
    width:26%; padding:0 2%; height:100vh; position:sticky; top:0; display:inline-block; vertical-align:top; 
    background:var(--color_principal); color:var(--color_claro); overflow-y:scroll; }


.publicidad { font-size:0.8rem; display:block; }
.publicidad label, .publicidad input { vertical-align:middle; }



/* ADAPTACIONES PARA DISPOSITIVOS MOVILES
---------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width : 320px) and (max-width : 1000px)  {
    aside { width:96%; padding:0 2%; height:auto; position:relative; }
    aside img { display:none; }
    .contenido { width:94%; padding:2rem 3% 30vh 3%; }
    #m100 { width:96% !important; padding:0 2% !important; }
#mno { display:none !important; }
#m100 { width:100% !important; }
#m90 { width:90% !important; }
}